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

好的，所以我尝试使用jquery和经典ASP在我的站点上创建一个新的登录表单。现在我的文档中有一个containing div被设置为hidden，当用户选择登录链接时，该div将在表单覆盖页面时消失。如果用户单击submit，页面将发布，div覆盖将消失。我真的希望它比那更平滑。因此，如果用户单击submit，jquery将使用ajax或其他工具在后台将其发布到db connect页面，然后从该asp获取响应文本，在错误标签中显示登录成功或不正确

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

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

我已经看了很多例子，但我似乎无法让它们正常运行

这里有一个到目前为止的工作函数

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

<table cellspacing="0" cellpadding="0" width="900" >
      <tr>
            <a href="index.asp" class="linkheader">Home</a>&nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="index1st.asp">1st</a>&nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="index2nd.asp">2nd</a>&nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="index3rd.asp">3rd</a>&nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="index4th.asp">4th</a>&nbsp;&nbsp;|&nbsp;&nbsp;
            <a href='#' id='login' class='linkheader'>Log In</a></td>
     </tr>
</table>

<!-- blur_login is transparent overlay. starts as hidden untill link is selected -->
<div id="blur_login">
    <!-- show_login is container for login form -->
    <div id="show_login">

        <a class="OKclose" href="#" >[ Close ]</a>

        <form method="" id="getin">
        <p><label for="Username">Username</label><br />
        <input name="Username" id="users" type="text" size="14" maxlength="14" autocomplete="off" tabindex="1"/>
        </p>
        <p><label for="last_name">Password</label><br />
        <input name="last_name" type="password" size="14" maxlength="14" autocomplete="off" tabindex="2" /><br />
            <label for="errors"></label>
        </p>
    <p><input type="submit" id="send" value="Log In &rarr;"></p>
</form>
    </div>
</div>

---

关于使用（jQuery）的必要性，您肯定是正确的。下面是一个示例，说明您应该在表单提交单击处理程序中放置什么

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

为更好的实践而编辑（根据评论）

---

Edit2：现在我只是变得粗心了

关于使用（jQuery）的必要性，您肯定是正确的。下面是一个示例，说明您应该在表单提交单击处理程序中放置什么

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

为更好的实践而编辑（根据评论）

---

Edit2：现在我开始粗心地阻止表单重新加载页面，这就是我使用的，它已经在所有主要浏览器中测试过了：

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

---

当然，您需要在表单中添加onsubmit来调用

doStuff（事件）
要阻止表单重新加载页面，我使用的就是这个，它已在所有主要浏览器中测试过：

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

当然，您需要在表单中添加onsubmit来调用
doStuff（事件）
尝试使用jQuerys post方法：

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

您可以找到
jQuery.post（）的手册
尝试使用jQuerys post方法：

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

您可以找到
jQuery.post（）
的手册，以下是我在页面中使用的内容：

$('#loginbutton').click(function(event) {
    event.preventDefault(); /*  Stops default form submit on click */       
        $('#loginbutton').hide();                                                               //Hide Login Button
        $('#loginprogress').html('<img src="web/imgs/loader.gif"> 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
                }
            }
            });
        });

$（“#登录按钮”）。单击（函数（事件）{
event.preventDefault（）；/*在单击时停止默认表单提交*/
$（“#登录按钮”）.hide（）；//隐藏登录按钮
$（'loginprogress'）.html（'Processing'）；//显示进度微调器
var username=$（“#username”）.val（）；
var password=$（“#password”）.val（）；
$.ajax（{//运行getUnlockedCall（）并将值返回表单
url:“ajaxDispatcher.php？action=login”，
数据：“用户名=”+用户名+”&密码=”+密码，
类型：“POST”，
成功：功能（数据）{
如果（数据=“”）{
$（“#登录按钮”）.show（）；//显示登录按钮
$（'.error'）.show（）；//显示登录错误消息
$（'#loginprogress'）.html（''）//显示进度微调器
}否则{
location.reload（）；
$（“#注销”）.show（）；//显示注销按钮
$（'#userinfo'）.show（）；
$（'#loginprogress'）.hide（）；//隐藏进度微调器
}
}
});
});

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

$('#loginbutton').click(function(event) {
    event.preventDefault(); /*  Stops default form submit on click */       
        $('#loginbutton').hide();                                                               //Hide Login Button
        $('#loginprogress').html('<img src="web/imgs/loader.gif"> 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
                }
            }
            });
        });

$（“#登录按钮”）。单击（函数（事件）{
event.preventDefault（）；/*在单击时停止默认表单提交*/
$（“#登录按钮”）.hide（）；//隐藏登录按钮
$（'loginprogress'）.html（'Processing'）；//显示进度微调器
var username=$（“#username”）.val（）；
var password=$（“#password”）.val（）；
$.ajax（{//运行getUnlockedCall（）并将值返回表单
url:“ajaxDispatcher.php？action=login”，
数据：“用户名=”+用户名+”&密码=”+密码，
类型：“POST”，
成功：功能（数据）{
如果（数据=“”）{
$（“#登录按钮”）.show（）；//显示登录按钮
$（'.error'）.show（）；//显示登录错误消息
$（'#loginprogress'）.html（''）//显示进度微调器
}否则{
location.reload（）；
$（“#注销”）.show（）；//显示注销按钮
$（'#userinfo'）.show（）；
$（'#loginprogress'）.hide（）；//隐藏进度微调器
}