Question

好的，所以我正在尝试使用jquery和经典ASP在我的网站上创建一个新的日志。到目前为止，我在我的文档中有一个包含div设置为隐藏，然后当用户选择登录链接时，div将淡入页面与表单重叠。如果用户单击“提交”，则页面将POST并且div覆盖已消失。我真的希望它比那更顺利。因此，如果用户单击提交，jquery将使用ajax或其他东西将其在后台发布到db connect页面，然后从该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

对于使用（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

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

$('#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为“username”和“password”的输入传递的值运行一个检查登录的函数。成功时，如果登录失败，它将返回false（显示错误警告），否则它将返回操作dom的值。在此示例中，它显示了注销按钮，隐藏了loginprogress div，并显示了一个名为“userinfo”的div。

Answer 3

尝试使用jQuerys post方法：

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

Here您可以找到jQuery.post()

的手册

Answer 4

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

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

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

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

4 个答案: