Ajax使用提交表单/ blockUI/ajaxform

我有一个表单（三组复选框），用户可以选择设备，然后选择命令在其上运行。在检查用户想要运行的设备和命令之后，他们点击继续按钮。Ajax使用提交表单/ blockUI/ajaxform

现在，我只是通过POST将表单数据发送到解码信息的另一个PHP页面。然后，设备的信息从数据库中提取，并作为参数插入到使用PHP EXEC命令运行的TCL脚本中。脚本需要约15秒才能返回。

但是，我不想加载另一个页面，我想使用JS $ .blockUI（）来阻止页面，提交表单，等待脚本返回，然后显示返回的内容，其中表单是以前定位。然后，显然解除阻止用户界面。

我为我的项目使用了Zend Framework。我有以下几点：

窗体声明：

<form name="runcommands" action="/commands/execute/" method="post">

三种不同的复选框组（这是一个动态生成的表单）：

"<input type='checkbox' name='globalcommand.$id' value='$id' />$command<br />"; 
"<input type='checkbox' name='projectcommand.$id' value='$id' />$command<br />"; 
"<input type='checkbox' name='device.$id' value='$id' />$hostname<br />";

我的JavaScript/AJAX的知识是非常非常非常有限。这是我在JS中做过的第一件事。网站的其余部分几乎是纯粹的PHP/HTML。这是我为JS所尝试的。显然，它不起作用。

<script type="text/javascript"> 
     // Globals 
     // prepare the form when the DOM is ready 

     var formd = ""; 

     $(document).ready(function() { 
      //$('#messageCenter').hide(); 

      //Form Ajax 
      var options = { 
       beforeSubmit: beforeSubmit, // pre-submit callback 
       success: showResponse // post-submit callback 
      }; 
      $('#runcommands').ajaxForm(options); // bind form using 'ajaxForm' 

      $.ajax({ 
       type: "post", 
       url: "/commands/execute/", 
       data: { 
        formd: formd, 
        serverResponse: data.message 
       }, 
       complete: finishAjax 
      }); 
      $.unblockUI(); 

     }); 

     function finishAjax (data) { 
      var ret = data.responseText; 
      alert(ret); 
     } 

     function beforeSubmit (formData, jqForm, options) { 
      formd = $.param(formData); 
      $.blockUI(); 
      return true; 
     } 

     function showResponse(responseText, statusText, xhr, $form) { 
      ret = responseText; 
      alert(ret); 
     } 

    </script>

在我执行PHP页面时，我只是回应脚本的输出。以另一种方式做这件事会更好吗？

感谢任何人的任何意见。我被卡住了，不知道该从哪里出发。

凯文

来源

2012-03-14 Kevin

两个解决方案：

解决方法一：
目前疏通被称为Ajax请求的开始，但你想要做的就是返回的响应后做什么。疏通添加到完整的功能：

<script type="text/javascript"> 
    // Globals 
    // prepare the form when the DOM is ready 

    var formd = ""; 

    $(document).ready(function() { 
     //$('#messageCenter').hide(); 

     //Form Ajax 
     var options = { 
      beforeSubmit: beforeSubmit, // pre-submit callback 
      success: showResponse // post-submit callback 
     }; 
     $('#runcommands').ajaxForm(options); // bind form using 'ajaxForm' 

     $.ajax({ 
      type: "post", 
      url: "/commands/execute/", 
      data: { 
       formd: formd, 
       serverResponse: data.message 
      }, 
      complete: finishAjax 
     }); 
    }); 

    function finishAjax (data) { 
     var ret = data.responseText; 
     alert(ret); 
     $.unblockUI(); 
    } 

    function beforeSubmit (formData, jqForm, options) { 
     formd = $.param(formData); 
     $.blockUI(); 
     return true; 
    } 

    function showResponse(responseText, statusText, xhr, $form) { 
     ret = responseText; 
     alert(ret); 
    } 

</script>

解决方案2：
通过设置异步选项设置为false创建Ajax同步。这将阻止浏览器：

$.ajax({ 
     type: "post", 
     url: "/commands/execute/", 
     async: false, 
     data: { 
      formd: formd, 
      serverResponse: data.message 
     }, 
     complete: finishAjax 
    });

来源

2012-03-15 04:22:27

Ajax使用提交表单/ blockUI/ajaxform

回答

相关问题