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

Question

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

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

我想让 jQuery 处理所有这些，并在后台通过查询或其他方法将值发送到包含 DB 连接的 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

好吧，您肯定是正确的，为此必须使用（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
  }
});

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

Edit2：现在我越来越粗心了

Answer 2

为了阻止表单重新加载页面，这是我使用的，它已经过测试可以在所有主要浏览器中工作：

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

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

Answer 3

尝试使用 jQuerys post 方法：

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

Here你可以找到jQuery.post()的手册

Answer 4

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

$('#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。