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

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

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

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

我已经看过一个充满了例子的手，我似乎无法让他们正确的。

继承人a 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; 
}); 
});

来源

2012-07-27 xxstevenxo

这里的手册是什么，我在我的网页使用：

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

来源

2012-07-27 22:17:44 bpeterson76

那么你肯定是正确的有关需要使用（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-27 19:48:16 wanovak

成功的回调函数必须在函数内部，并且介意你的逗号，因为尾随的逗号会炸掉某个版本的IE。 – bpeterson76 2012-07-27 22:22:55

快速修改： - / – wanovak 2012-07-27 22:25:32

要停止重新加载页面的形式，这就是我它已经过测试，可在所有主流浏览器中使用：

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

当然，您需要添加一个onsubmit到表格中以呼叫doStuff(event);。

来源

2012-07-27 19:52:07

尝试使用jQuerys POST方法：

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

Here你可以找到jQuery.post()

来源

2012-07-27 19:56:38 Raisch

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

回答

相关问题