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

回答

相關問題