jQuery的提交表单没有页面重载(jQuery submit form without page

好了，所以我试图让使用jQuery和传统的ASP新的日志形式形成我的网站。 截至目前我有我的文档中包含分区多数民众赞成设置为隐藏，然后当用户选择登录链接的股利将与形式覆盖在页面褪色。 如果用户点击提交，页面将POST和股利覆盖消失了。 我真的希望它是比这更光滑。 因此，如果用户点击提交，jQuery将使用AJAX或东西将它张贴在后台分贝连接页面，然后从那个ASP中的错误标签显示无论是在成功登录或不正确的响应文本。

我用我的网站上传统的ASP来获取与上次登录提交表单数据。 然后，检查数据库，看看发生了什么进入比赛。

我想有jQuery的处理这一切，通过在后台将包含DB连接，以便点击时提交的页面不会重新加载ASP页查询或其他方法发送的值。

我已经看了AA满手的例子，我似乎无法让他们在朝好的方向发展。

继承人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为“用户名”和“密码”的输入的传递的值的函数。 如果成功，如果登录失败则返回错误（显示错误警告），否则将返回值操作DOM。 在这个例子中，它显示了退出按钮，隐藏loginprogress DIV，并示出了被称为“用户信息”分区。

Answer 2:

那么你即将有必要使用（jQuery的）肯定是正确的AJAX这一点。 下面是你应该把什么样的形式提交click处理程序的例子。

$.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 3:

尝试使用jQuerys POST方法：

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

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

Answer 4:

要停止重新加载页面的形式，这是我使用，它已经测试了所有主要浏览器的工作：

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

当然，你需要一个的onsubmit添加到窗体调用doStuff(event); 。

文章来源: jQuery submit form without page reload