頁面刷新，而不是Ajax負載沒有

Question

在表單提交我想要加載一個與MySQL表更新列表的div。我將表單變量發送到一個php並將它們發佈到一個mysql表中。同一頁面會顯示完整的表格數據。我想將數據加載到與窗體相同的div標籤中。所以看起來信息是在表單上加載的。

我的JavaScript

$("#formSubmit").submit(function(){ 

    var name = $("input#name").val(); 
    var comment = $("input#comment").val(); 
    var filmnumber = $("input#hidden").val(); 

    var dataString = 'name='+ name + '&comment=' + comment + '&filmnumber=' + filmnumber; 

    $.ajax({ 
     type: "POST", 
     url: "comment.php", 
     data: dataString, 
     success: function() { 
      $('#2').load('comment.php'); 
     } 
    }); 

我的形式 -

<div id="2">          
    <p>Add a Comment</p> 
    <form id="formSubmit" method="POST"> 
     <div> 
      <input type="hidden" name="hidden" id="hidden" value="2"> 
      <label for="name">Your Name</label> 
      <input type="text" name="name" id="name" /> 

      <label for="body">Comment Body</label> 
      <textarea name="comment" id="comment" cols="20" rows="5"></textarea> 

      <input type="submit" id="comment" class="button" value="Submit" /> 
    </form> 
    </div> 

所有它做的是刷新頁面，並在不加載信息DIV 2：S

感謝您的幫助

Answer 1

您需要防止表單使用0重定向頁面方法事件對象上：

$("#formSubmit").submit(function(e){ // add the event object as an argument to your function 
    e.preventDefault(); // right here 

    var name = $("input#name").val(); 
    var comment = $("input#comment").val(); 
    var filmnumber = $("input#hidden").val(); 

    var dataString = 'name='+ name + '&comment=' + comment + '&filmnumber=' + filmnumber; 

    $.ajax({ 
     type: "POST", 
     url: "comment.php", 
     data: dataString, 
     success: function() { 
     $('#2').load('comment.php'); 
     } 
    }); 
}); 

Answer 2

添加return false到底從停止提交表單。或者如果你想更優雅的使用preventDefault（）;方法。親自爲這樣簡單的事情，雖然我只是堅持返回虛假;

$("#formSubmit").submit(function(e){ // add the event object as an argument to your function 


var name = $("input#name").val(); 
var comment = $("input#comment").val(); 
var filmnumber = $("input#hidden").val(); 

var dataString = 'name='+ name + '&comment=' + comment + '&filmnumber=' + filmnumber; 

$.ajax({ 
    type: "POST", 
    url: "comment.php", 
    data: dataString, 
    success: function() { 
    $('#2').load('comment.php'); 
    } 
}); 
return false;//right here 

}）;