2010-04-27 208 views
1

我試圖通過AJAX提交表單,而不是使用正常的POST提交。該HTML是一個標準的形式method="post"和我的jQuery代碼如下:jQuery AJAX表單提交不起作用

jQuery.noConflict(); 
jQuery(document).ready(function($) { 
    var $form = $('#default_contact'); 

    $form.submit(function() { 
     $.ajax({ 
      type: 'POST', 
      url: $form.attr('action'), 
      data: $form.serialize(), 
      success: function(response) { 
       console.log(response); 
      } 
     }); 

     return false; 
    }); 
}); 

(基於this answer

我是從提交函數返回假的,但形式上還是會被提交我無法弄清楚爲什麼。沒有得到任何Firebug錯誤。

回答

4

如果html設置正確,您的代碼工作正常。這裏是我的測試HTML(使用PHP),所以你可以比較你自己的。

<?php 
if (!empty($_POST)) { 
    die("<pre>" . print_r($_POST, true) . "</pre>"); 
} 
?> 
<html> 
<head> 
    <title>ajax submit test</title> 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 
    jQuery.noConflict(); 
    jQuery(document).ready(function ($) { 
     var $form = $('#default_contact'); 

     $form.submit(function() { 
      $.ajax({ 
       type: 'POST', 
       url: $form.attr('action'), 
       data: $form.serialize(), 
       success: function (response) { 
        alert(response); 
       } 
      }); 

      return false; 
     }); 
    }); 
</script>  
</head> 
<body> 
    <form id="default_contact" action="formsubmit.php" method="post"> 
    <input type="hidden" value="123" name="in1" /> 
    <input type="hidden" value="456" name="in2" /> 
    <input type="submit" value="send" /> 
    </form> 
</body> 
</html> 
+0

原來是一件非常愚蠢的事 - jQuery庫代碼沒有被包含在內。這是一個PHP條件,在我正在測試的頁面上是錯誤的......哦,哦! – DisgruntledGoat 2010-04-27 17:01:21

2

如果你有你的html設置,以便表單可以獨立工作,那麼它將作爲一個沒有jQuery的普通表單。因此,採取了從HTML的action屬性,並改變你的jQuery來:

url: your-submit-file.php, 

如果還是不行,請嘗試:

jQuery(document).ready(function($) { 
    var $form = $('#default_contact'); 

    $form.submit(function(event) { 
     $.ajax({ 
      type: 'POST', 
      url: your-submit-file.php, 
      data: $form.serialize(), 
      success: function(response) { 
       console.log(response); 
      } 
    }); 
    event.preventDefault; 
    return false; 
}); 

而且,你嘗試過jQuery的$。員額() ?這是更容易使用...

0

我有一個類似problem-我的問題是,表單POST過程中,我使用$(「形式」)。遞交做提交頁面之前的東西。這東西包括一個jQuery後發作。抱歉,系統POST操作難道不填寫表格後完成之前,因而引起的問題later-我的代碼是這樣的:

 $("form").submit(function() { 
       var result = 
        $.post('/Controller/Action', 
        { data: array.toString() } 
      }); 

的解決方案是

 event.preventDefault; 

立即返回true,它才停止表單發佈直到ajax調用完成。