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

Posted 2023-02-22

【中文标题】jQuery提交表单而无需重新加载页面

【英文标题】：jQuery submit form without page reload

【发布时间】：2012-07-26 12:52:18

【问题描述】：

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

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

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

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

这是一个FIDDLE 以查看目前的工作功能。

任何帮助将不胜感激，在此先感谢。

<table cellspacing="0" cellpadding="0"  >
      <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;
);   
);​

【参考方案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：现在我越来越粗心了

【讨论】：

成功回调必须在 ajax 函数内部，并注意逗号，因为尾随的逗号会炸毁某些版本的 IE。

【参考方案2】：

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

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

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

【参考方案3】：

尝试使用 jQuerys post 方法：

$.post("dbProcessing.asp", $("#loginForm").serialize(), function(data)

    // TODO: function logic
);

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

【参考方案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。