jQuery - 通过AJAX提交表单并将结果页面放入div中?

问题描述:

我使用jQuery Form( http://jquery.malsup.com/form / )将数据发送到表单 - 是否有一种方法可以在没有刷新的情况下将表单生成的结果页面放入页面的div中?

I'm using jQuery Form (http://jquery.malsup.com/form/) to get send data to a form - is there a way I can then, without refresh, put the results page that's generated by the form into a div on the page?

任何建议的赞赏!

这种形式的插件 - 它在几天之前就被制作出来了,这是一种使用jQuery序列化表单数据的简单方法,并且不再有真正的用途。我会建议这样的:

I would suggest not using that form plugin - it was made back in the days before there was an easy way to serialize form data using jQuery, and serves no real purpose any more. I would suggest something like this:

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






如果您坚持使用 jQuery表单插件 - 这是不推荐的,你可以设置 target 选项添加到您要填写的元素的选择器中:


If you insist on using jQuery Form Plugin - which is NOT recommended -, you can set the target option to a selector of the element(s) you would like to fill up:

// 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:

To prevent refresh, just make sure the form's onsubmit event returns false:

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