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

时间:2010-04-26 10:56:47

标签: forms jquery

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

任何建议表示赞赏!

1 个答案:

答案 0 :(得分:11)

我建议使用该表单插件 - 它是在使用jQuery序列化表单数据的简单方法之前的几天内制作的,并且没有真正提供目的了。我会建议这样的事情:

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

如果您坚持使用jQuery Form Plugin - 这是不推荐的 - ,您可以将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">