jQuery提交表单而不重新加载页面

Posted 2023-05-09

【中文标题】jQuery提交表单而不重新加载页面

【英文标题】：jQuery submit form without reloading page

【发布时间】：2013-10-14 12:33:23

【问题描述】：

我对 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(); 
    );
); 

【参考方案1】：

您应该绑定到表单的 submit 事件，而不是绑定到单击事件 (input[type=submit])。

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

我也不确定验证。如果它异步运行，则需要回调。如果它同步运行，它什么时候被触发？除非您的验证插件自行完成，否则似乎应该在提交表单时完成：

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

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

【讨论】：

谢谢，e.preventDefault 为提交和成功的 div 做了诀窍。

我想在提交表单后阻止刷新..此代码无法正常工作

这在本地对我有用。但是当我上传到我的托管服务器时，.on("submit", ..) 调用抛出了一个未定义的错误。不知道为什么，因为我认为无论我的代码部署在哪里，我都有相同版本的 jQuery？！我找到了一种将行更新为如下方式的替代方法： $("form").submit(function(e)..); ..然后工作正常

【参考方案2】：

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

2) 给定脚本中没有任何内容会导致#result 隐藏，但您可以尝试$('#result').show() 看看是否能恢复

【讨论】：

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

好的，然后重新打开 .sliddingDiv

【参考方案3】：

请检查您使用的是哪个 jQuery 版本，因为在 jQuery 1.8.2 之后，来自 jQuery Ajax 的“成功”功能已被弃用。

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