1

好的，所以我正在尝试使用 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>

​</p> 

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

4 回答 4

3

那么你肯定是正确的使用（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：现在我只是变得粗心了

于 2012-07-27T19:48:16.030 回答
3

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

$('#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。在这个例子中，它显示了注销按钮，隐藏了loginprogressdiv，并显示了一个名为“userinfo”的 div。

于 2012-07-27T22:17:44.223 回答
1

尝试使用 jQuerys post 方法：

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

在这里你可以找到手册jQuery.post()

于 2012-07-27T19:56:38.487 回答
0

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

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

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

于 2012-07-27T19:52:07.393 回答