使用页面刷新而不是Ajax加载进行页面更新

Question

使用页面刷新而不是Ajax加载进行页面更新

3

在表单提交时，我想要加载一个带有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中。谢谢你的帮助。

- DIM3NSION

2个回答

1

在结尾处添加一个return false以阻止表单提交。或者，如果您想更加优雅一些，可以使用preventDefault()方法。但就我个人而言，对于像这样简单的事情，我只是坚持使用return false。

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

});

- Rooster

return false 会阻止默认行为，但也会停止事件传播。 - Eli

如果您在提供的代码末尾使用“return false”，它将正常工作。但是，如果代码比提供的更复杂，这可能会引起问题。但是，如果只是阻止表单提交，返回false就可以了。 - Rooster

我明白代码本身应该是可以正常工作的，但如果有其他更高层次的提交事件，它们将无法正确触发，因为你阻止了事件的传播。 - Eli

哦，我只是复制了你的代码，因为它更接近我正在输入的位置。这与顶部的代码是一样的，不是吗？ - Rooster

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eli · Accepted Answer

您需要使用事件对象上的 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');
      }
    });
});