使用 jQuery 和 AJAX 处理表单答案

【问题标题】：Handling a form with jQuery and AJAX使用 jQuery 和 AJAX 处理表单
【发布时间】：2011-08-03 01:36:10
【问题描述】：

我尝试了许多不同的方法来使用 jQuery 和 AJAX 提交我的表单，但是，它们似乎都不起作用。它现在的编码方式使它在提交表单时重定向到我的后端 php 脚本以显示输出。

我希望它从后端脚本获取此输出，并在提交表单后将其显示在页面上的 div 中，而无需重定向到另一个页面。这是目前的代码：

表单和我希望结果进入的 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 页面。有什么想法可以解决这个问题吗？我确信这不是太难的事情，但我已经坚持了很长一段时间了。任何帮助将不胜感激。

【问题讨论】：

标签： jquery html ajax forms submit

【解决方案1】：

我同意埃文的观点。由于您使用的是 AJAX 调用，因此无需在 HTML 中添加 onSubmit。

另外，我建议您看一下 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;
});

【讨论】：

【解决方案2】：

你正在使用 input#btnGo & form#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);
         });
     });

【讨论】：

【解决方案3】：

删除onSubmit=document.form1.submit();并将<input type='SUBMIT'更改为<input type='BUTTON'。

jQuery 已经处理好了。

另外，您的表单名称应该是一个 ID。

【讨论】：

【解决方案4】：

修改这个

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

到这里

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

【讨论】：

【解决方案5】：

你没有在你的 js 中使用正确的触发器。

试试这样的：

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

【讨论】：

【解决方案6】：

例如，您可以像这样阻止提交表单：

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

   evt.preventDefault();

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

【讨论】：