jquery提交表单无需重新加载页面(JQuery submit form without reloading page)

jquery提交表单无需重新加载页面(JQuery submit form without reloading page)

我对Jquery不是很熟悉。 我正在尝试制作一个在后台提交的表单，无需重新加载页面。 我有一个隐藏的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 onlcick $(document).ready(function(){ $(".slidingDiv").hide(); $(".show_hide").show(); $('.show_hide').click(function(){ $(".slidingDiv").slideToggle(); }); });

I'm not very familiar with JQuery. I'm trying to make a form that is submitted in the background without reloading page.

I have a hidden div which shows and hides on click, inside the div there's a form.

I have two problems:

1) When the form validation fails, the form is still submitted. I tried to put validation and submission codes in condition if(validation == valid) { $.ajax.... } but it does not work properly.

2) After the form is submitted the div automatically hides, so successful message cannot be seen.

Here's the code:

$().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(); }); });

最满意答案

而不是绑定到点击事件（ 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。

Rather than bind to the click event (input[type=submit]) you should bind to the submit event for the form.

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

I'm also not sure about the validation. If it runs asynchronously, a callback is required. If it runs synchronously, when does it get triggered? It seems like it should be done when the form is submitted unless your validation plugin does that on its own:

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

Using e.preventDefault will prevent reload and should allow your success div to display.