jQuery - 通过AJAX提交表单并将结果页面放入一个div中...？

Question

我正在使用jQuery Form（http://jquery.malsup.com/form/）将数据发送到一个表单，有没有办法在不刷新页面的情况下，将表单生成的结果页放入页面上的某个div中？

感谢您的任何建议！

- Cordial

Answer 1

我建议不要使用那个表单插件 - 它是在jQuery还没有一种易于序列化表单数据的方法的时代制作的，现在已经没有任何真正的用途了。我建议使用类似于这样的东西：

$("form").submit(function() {
    $.post($(this).attr("action"), $(this).serialize(), function(data) {
        $("#someDiv").html(data);
    });
    return false; // prevent normal submit
});

如果你坚持使用jQuery表单插件，虽然这并不被推荐，但你可以将target选项设置为你想要填充的元素的选择器：

// prepare Options Object 
var options = { 
    target:     '#divToUpdate', 
    url:        'comment.php', 
    success:    function(data) { 
        alert('Thanks for your comment!'); 
    } 
}; 

更多信息请参考http://jquery.malsup.com/form/#options-object。

为了防止刷新，请确保表单的onsubmit事件返回false：

<form method="post" onsubmit="return false">

- karim79

---

谢谢您的建议，我会遵循您的建议不使用插件。但是，请原谅我如果我有点迟钝，当我提交结果时，结果div又被表单页面填满了！有什么想法吗？ - Cordial

@Cordial - 你并不是想不通 :) 你需要告诉服务器只返回你想要用来填充DIV的HTML部分（这是更有效的方法），或者从服务器响应中挑选出你想要的特定HTML，例如 $("#someDiv").html($(html).find('#results'));。 - karim79