【问题标题】：JQuery- ui dialog return value & iplocation data retrievalJQuery- ui 对话框返回值 & iplocation 数据检索
【发布时间】：2011-01-13 09:08:29
【问题描述】：

基本上，我参考了一些资料，发现了这个：

“嗯，这很简单，只需在您的页面上创建一个 div，将表单放入其中，然后将其作为您的对话框。”这很好，但是如果你想达到最大的兼容性怎么办？如果用户出于某种原因在其浏览器中禁用了 JavaScript，会发生什么情况？突然间，整个“添加”功能都丢失了。”

我下载了原脚本修改试试。修改后不行。

我想要达到的目标如下：

点击弹出对话框形式（ok），

我需要将值传入new.php进行内部数据查询。

单击表单上的保存按钮时，我需要将值 php 回显到 $.ajax 成功：

同时显示进度条加载画面，直到用户验证完成并关闭弹窗。

第二件事是我在 $.getJSON 中错过的其他内容，结果不会在#profile 中显示

完整代码参考：

index.php

<head>
<title>jQuery AJAX-Enabled Forms in Modal Dialog</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

<script language="javascript" type="text/javascript">

$(document).ready(dialogForms);

function dialogForms() {

   $('a.dialog-form').click(function() {

                   //how to pass in additional parameter value into new.php for local processing?

   var a = $(this);

   $.get(a.attr('href'),function(resp){

     var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
     $('body').append(dialog);
     dialog.find(':submit').hide();

     dialog.dialog({
      title: a.attr('title') ? a.attr('title') : '',
      modal: true,
      buttons: {
       'Save': function() {submitFormWithAjax($(this).find('form'));},
       'Cancel': function() {$(this).dialog('close');}
      },
      close: function() {$(this).remove();},
      width: 'auto'
      });

   }, 'html');

   return false;
   });
}


function submitFormWithAjax(form) 
{
  form = $(form);

 //if dataType: 'script' then must echo output in javascript alert format

  $.ajax({
  url: form.attr('action'),
  data: form.serialize(),
  type: (form.attr('method')),
  dataType: 'script'

  //after adding the commented line below, the popup not working, instead it will go directly to new.php
  //suspect due to dataType and form method thing.
  /*        
  beforeSend: function(){ 
   //the modal popup show loading bar
  },

  error: function(XMLHttpRequest, textStatus, errorThrown) {

  },

  success:  function(output) {       

   if(output==1){   //login success
                            //close modal popup 
    window.reload(); //to detect SESSION['user'] stored inside php. If exist, then prefill this master form with user details
   }
   else{
                            //put message into modal popup as div, message is something like invalid login...

   }

  },

  complete: function(){ }
   //close modal popup          
  });
  */

  });

  return false;
}




</script>


<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" rel="stylesheet" />
</head>

<body>
<a href="new.php" class="dialog-form" title="login">Existing user login here</a>

<div id="profile">
<span id="ip"></span>
<span id="country"></span>
</div>

</body>

</html>

【问题讨论】：

标签： jquery json user-interface dialog

【解决方案1】：

要传递参数，请使用以下格式：

$.get(URL, {
    PARAM
  },
  function(resp) {});

PARAM 的形式为key: value, key2: value2。

要提交表单，请考虑使用malsup's jQuery form plugins。

要使用 AJAX，URL 必须在同一个域中。因此使用getJSON 到其他域，例如来自其他域的iplocationtools.com 将失败。有几种方法可以进行跨域 AJAX。

【讨论】：