没有页面刷新而不是Ajax Load

在表单提交我想加载一个div与更新的mysql表列表。 我将表单变量发送到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'); } }); 

我的表格 –

 
 
Add a Comment
 
 
  Your Name  Comment Body     

它所做的只是刷新页面而不是将信息加载到div 2：S中

谢谢你的帮助

Answer 1

您需要阻止表单使用事件对象上的preventDefault方法重定向页面：

 $("#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

在结尾添加一个返回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 

}）;