jQuery提交表单没有页面重新加载

好的，所以我正在尝试使用jquery和经典ASP在我的网站上创建一个新的日志。 截至目前我在我的文档中有一个包含div设置为隐藏，然后当用户选择登录链接时，div将淡入覆盖页面与表单。 如果用户单击“提交”，则页面将POST并且div覆盖已消失。 我真的希望它比这更顺利。 因此，如果用户单击提交，jquery将使用ajax或其他东西将其在后台发布到db connect页面，然后从该asp获取响应文本，显示成功登录或错误标签中的错误。

我在我的网站上使用经典的asp来获取上次登录时提交的表单数据。 然后检查数据库以查看输入的内容是否匹配。

我想让jQuery处理所有这些并通过后台的查询或其他方法将值发送到包含数据库连接的ASP页面，以便在单击提交时页面不会重新加载。

我看起来像一个充满示例的手，我似乎无法让他们正确。

到目前为止 ，还有一个关于工作function的FIDDLE 。

任何帮助将不胜感激，提前谢谢。

Home  |   1st  |   2nd  |   3rd  |   4th  |   Log In  
  
 [ Close ] 
 
Username
  
 
Password
 
  
 
 
 
  

 $(document).ready(function() { $(window).bind("resize", function(){ $("#blur_login").css("height", $(window).height()); $("#blur_logout").css("height", $(window).height()); }); //Adjust height of overlay to fill screen when page loads $("#blur_login").css("height", $(document).height()); $('#login').click(function(a){ $("#blur_login").fadeIn(); // Page focus on fadein is the username input $('#users').focus(); a.preventDefault; return false; }); $('#logout').click(function(b){ $("#blur_logout").fadeIn(); b.preventDefault; return false; }); $('#send').click(function(c){ //AJAX form submit here }); // Functions for login form var $submit = $("input[type=submit]"), $inputs = $('input[type=text], input[type=password]'); // Checks if fields are empty, if so then disable loginbutton function checkEmpty() { return $inputs.filter(function() { return !$.trim(this.value); }).length === 0; } // Enables the submit button when characters have been entered in each field $inputs.on('keyup blur', function() { $submit.prop("disabled", !checkEmpty()); }).keyup(); // trigger any one // When the close link is selected the window will fade out $(".OKclose").click(function(d){ $("#blur_login").fadeOut(); d.preventDefault; return false; }); });​ 

Answer 1

这是我在我的网页中使用的内容：

 $('#loginbutton').click(function(event) { event.preventDefault(); /* Stops default form submit on click */ $('#loginbutton').hide(); //Hide Login Button $('#loginprogress').html(' Processing'); // Show Progress Spinner var username = $("#username").val(); var password = $("#password").val(); $.ajax({ // Run getUnlockedCall() and return values to form url: "ajaxDispatcher.php?action=login", data: 'username=' + username + '&password=' + password, type: "POST", success: function(data){ if (data == '') { $('#loginbutton').show(); // Show Login button $('.error').show(); // Display login error message $('#loginprogress').html(''); // Show Progress Spinner } else { location.reload(); $('#logout').show(); // Show logout button $('#userinfo').show(); $('#loginprogress').hide(); // Hide Progress Spinner } } }); }); 

简而言之， #loginbutton是一个jquery按钮。 点击它隐藏以防止多次提交。 调度程序使用id为“username”和“password”的输入传递的值运行一个检查登录的函数。 成功时，如果登录失败，它将返回false（显示错误警告），否则它将返回操作dom的值。 在此示例中，它显示了注销按钮，隐藏了loginprogress div，并显示了一个名为“userinfo”的div。

Answer 2

那你有必要使用（jQuery的） AJAX这个肯定是正确的。 以下是您应该在表单提交点击处理程序中放置的示例。

 $.ajax({ type: "POST", url: "dbProcessing.asp", data: $('#loginForm').serialize(), success: function(){ // Insert any changes into the DOM that you like // msg will be whatever you print out in dbProcessing.asp // so set it to 'success' or something if the login was successful // and then do an if statement to see what === msg and insert // a message into the DOM or redirect based on that } }); 

编辑为更好的做法（根据评论）

编辑2：现在我只是变得粗心了

Answer 3

尝试使用jQuerys post方法：

 $.post("dbProcessing.asp", $("#loginForm").serialize(), function(data) { // TODO: function logic }); 

在这里你可以找到jQuery.post()的手册

Answer 4

要阻止表单重新加载页面，这是我使用的，它已经过测试，适用于所有主流浏览器：

 function doStuff(e){ e.returnValue = e.preventDefault && e.preventDefault() ? false : false; // handle AJAX here } 

当然，您需要在表单中添加一个onsubmit来调用doStuff(event); 。