使用jQuery和AJAX處理表單

Question

我已經嘗試了使用jQuery和AJAX提交表單的許多不同方法，但是，它們都沒有工作。它現在被編碼的方式使得當表單被提交時，它會重定向到我的後端php腳本來顯示輸出。

我希望它做的是從後端腳本獲取該輸出，並在表單提交後將其顯示在頁面上的div中，而無需重定向到其他頁面。這裏是代碼的現在：

形式和我想要的結果在

<form method='post' action='serverManager.php' name='form1'> 
     <input type='SUBMIT' value='GO' name='btnGo' onSubmit=document.form1.submit(); /> 
     <input type='HIDDEN' name='ACTION' value='GO' /> 
    </form> 
    <div id="result"></div> 

Ajax調用

$('input#btnGo').click(function() { 
    $.ajax({ 
     url: 'serverManager.php', 
     type: 'post', 
     data: $('form#form1').serialize(), 
     success: function(data) { 
       $('#result').html(msg); 
      } 
    }); 
}); 

去有了這個代碼仍然重定向到ServerManager的股利。 PHP頁面上有作業提交文本。任何想法如何解決這個問題？我相信這不是太困難，但我一直堅持這一段時間。任何幫助將非常感激。

Answer 1

刪除onSubmit=document.form1.submit();並將<input type='SUBMIT'更改爲<input type='BUTTON'。

它已經與jQuery的照顧。

此外，您的表單的名稱應該是一個ID。

Answer 2

修改此

<input type='SUBMIT' value='GO' name='btnGo' onSubmit=document.form1.submit(); /> 

這個

<input type='BUTTON' value='GO' name='btnGo' /> 

Answer 3

你沒有在你的JS使用正確的觸發器。

嘗試這樣：

$('input#btnGo').submit(function(event) { 
    event.preventDefault(); 
    $.ajax({ 
     url: 'serverManager.php', 
     type: 'post', 
     data: $('form#form1').serialize(), 
     success: function(data) { 
      $('#result').html(msg); 
     } 
    }); 
}); 

Answer 4

例如，你可以阻止提交表單是這樣的：

$("form[name='form1']").submit(function(evt){ 

    evt.preventDefault(); 

    $.ajax({ 
     url: 'serverManager.php', 
     type: 'post', 
     data: $('form#form1').serialize(), 
     success: function(data) { 
       $('#result').html(msg); 
      } 
    }); 
}); 

Answer 5

我與埃文同意。因爲您使用的是AJAX調用，所以無需在HTML中添加提交。另外，我建議你看看JQuery的Ajax表單插件，這將使處理表單更容易。

鏈接：http://jquery.malsup.com/form/

所有你需要做的就是在HTML頭的腳本，做一些類似下面的

$(document).ready(function() { 

     $('yourFormID').ajaxForm(function() { 
      alert("prepare your form to be submitted."); 
     }); 
     $('yourFormID').ajaxSubmit(); 
     return false; 
}); 

Answer 6

您使用的輸入＃btnGo &形式＃Form1上，記住＃被引用爲id而不是名字，所以你需要提供id也試試這個，

<form method='post' action='serverManager.php' name='form1' id='form1'> 
    <input type='SUBMIT' value='GO' name='btnGo' id='btnGo' /> 
    <input type='HIDDEN' name='ACTION' value='GO' /> 
    </form> 

    $('input#btnGo').click(function() { 
      $.ajax({ 
      url: 'serverManager.php', 
      type: 'post', 
      data: $('form#form1').serialize(), 
      success: function(data) { 
        $('#result').html(msg); 
     }); 
    });