jQuery 提交表单无需重新加载页面

Question

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

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

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

我看了一大堆例子，但似乎无法让它们正确运行。

这是 FIDDLE查看到目前为止的工作功能。

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

<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>

​

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

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