不重新加载页面的情况下提交表单的jQuery方法

Question

我对jQuery不是很熟悉。我想制作一个表单，在不重新加载页面的情况下后台提交。

我有一个隐藏的div，点击后可以显示和隐藏，div内部有一个表单。

我有两个问题：

1）当表单验证失败时，表单仍然会被提交。我尝试将验证和提交代码放在条件if(validation == valid) { $.ajax.... }中，但它无法正常工作。

2）提交表单后，div会自动隐藏，因此无法看到成功消息。

以下是代码：

$().ready(function() { 

    // Validate the form when it is submitted, using validation plugin.
    var validator = $("#contactform").validate({
        errorContainer: container,
        errorLabelContainer: $(),
    onkeyup: false,
    onclick: false,
    onfocusout: false,
    errorPlacement: function (error, element) { 
error.insertBefore(element);    
}   
    });
});

$(function() {

    //This submits a form
$('input[type=submit]').click(function() {
        $.ajax({
            type: "POST",
            url: "contact.php",
            data: $("#contactform").serialize(),
            beforeSend: function() {
                $('#result').html('<img src="loading.gif" />');
            },
            success: function(data) {
                $('#result').html(data);
            }

        })
    })
})


//This shows and hides div onclick
$(document).ready(function(){   
        $(".slidingDiv").hide(); 
        $(".show_hide").show(); 
    $('.show_hide').click(function(){ 
    $(".slidingDiv").slideToggle(); 
    });
}); 

- qwaz

Answer 1

与其绑定点击事件（input[type=submit]），你应该绑定表单的submit事件。

$("form").on("submit", function (e) {
    e.preventDefault();

我也不确定验证。如果它是异步运行的，需要回调函数。如果它是同步运行的，那么它何时被触发？除非您的验证插件已经自行处理，否则似乎应该在提交表单时进行：

$("form").on("submit", function (e) {
    e.preventDefault();
    if ($(this).validate(options)) {
        $.ajax

使用e.preventDefault将阻止重新加载，并应允许您的成功 div 显示。

- Explosion Pills

---

谢谢，e.preventDefault解决了提交和成功div的问题。 - qwaz

我想在提交表单后防止刷新页面...这段代码无法正常工作。 - Rahat Islam Khan

这在本地对我起作用。但是当我上传到托管服务器时，.on("submit", ..) 调用会抛出未定义的错误..不知道为什么，因为我认为我的代码部署在哪里，jQuery 的版本应该是相同的？！我找到了一种替代方法来更新行，像这样：$("form").submit(function(e){..});..然后就可以正常工作了。 - Gene Bo

Answer 2

请检查您使用的jQuery版本，因为在jQuery 1.8.2之后，jQuery Ajax的"success"函数已被弃用。

使用e.preventDefault()来阻止实际提交事件。

- Jay Patel

Answer 3

1) 使用event.preventDefault();防止表单提交 -http://api.jquery.com/event.preventDefault/

2) 给定的脚本中没有任何东西应该导致#result隐藏，但您可以尝试使用$('#result').show()来查看是否显示

- Seth McClaine

---

Seth，它不是#result隐藏的，而是$(".slidingDiv")。 - qwaz

好的，然后切换回去。.sliddingDiv - Seth McClaine