JQuery提交表单而不重新加载页面
我对JQuery不太熟悉。 我正在尝试制作一个在后台提交的表单而不重新加载页面。
我有一个隐藏的div显示和隐藏点击，div内有一个表单。
我有两个问题：
1）当表单validation失败时，表单仍然会被提交。 我尝试将validation和提交代码置于条件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('
'); }, 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(); }); });
您应该绑定到表单的submit事件，而不是绑定到click事件（ input[type=submit] ）。
$("form").on("submit", function (e) { e.preventDefault();
我也不确定validation。 如果它以异步方式运行，则需要回调。 如果它同步运行，它何时被触发？ 似乎应该在提交表单时完成，除非您的validation插件单独执行此操作：
$("form").on("submit", function (e) { e.preventDefault(); if ($(this).validate(options)) { $.ajax
使用e.preventDefault将阻止重新加载，并应允许您的成功div显示。
1）使用event.preventDefault（）; 保持表单不提交 – http://api.jquery.com/event.preventDefault/
2）在给定的脚本中没有任何东西可以因为#result隐藏…但你可以尝试$（’＃result’）。show（）并查看是否会将其恢复
请检查您正在使用哪个jquery版本，因为在jquery 1.8.2之后，不推荐使用jquery ajax的“success”函数。
使用e.preventDefault（）来阻止实际的提交事件。