jQuery的无页面重载提交表单 [英] jQuery submit form without page reload
问题描述
好了，所以我试图让使用jQuery和传统的ASP一个新的日志形式形成自己的网站。截至目前我有一个容器div在我的文档多数民众赞成设置为隐藏，然后当用户选择登录链接的股利将与形式覆盖在页面消失。如果用户点击提交，页面将POST和股利覆盖已经一去不复返了。我真的希望它是比这更流畅。因此，如果点击提交的用户，jQuery将用ajax或东西将它张贴在后台分贝连接页面，然后从那个ASP中的错误标签显示无论是在成功登录或不正确的响应文本。
我用我的网站上传统的ASP来获取表单数据的提交与previous登录。随后，检查数据库，看看发生了什么进入比赛。
我想有jQuery的处理这一切，并通过在后台将包含数据库连接，所以被点击时提交页面不会重新加载ASP页查询或其他方式发送的值。
我已经看了AA满手的例子，我似乎无法让他们在朝好的方向发展。
下面有一个 FIDDLE 看与工作职能为止。
任何帮助将是很大的AP preciated，先谢谢了。
＆LT;表CELLSPACING =0的cellpadding =0WIDTH =900＆GT;
＆其中; TR＆GT;
＆LT; A HREF =的index.asp级=linkheader＆GT;首页＆LT; / A＆GT;＆安培; NBSP;＆安培; NBSP; |＆安培; NBSP;＆安培; NBSP;
＆所述; A HREF =index1st.asp＆GT;第一和所述; / a取代;＆安培; NBSP;＆安培; NBSP; |＆安培; NBSP;＆安培; NBSP;
＆所述; A HREF =index2nd.asp＆GT;第二和所述; / a取代;＆安培; NBSP;＆安培; NBSP; |＆安培; NBSP;＆安培; NBSP;
＆所述; A HREF =index3rd.asp＆GT;第三＆所述; / a取代;＆安培; NBSP;＆安培; NBSP; |＆安培; NBSP;＆安培; NBSP;
＆所述; A HREF =index4th.asp＆GT;第四＆所述; / a取代;＆安培; NBSP;＆安培; NBSP; |＆安培; NBSP;＆安培; NBSP;
＆LT; A HREF =＃号='登录'级='linkheader'＆GT;登录与＆lt; / A＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT;！ - blur_login是透明的叠加。开始为隐藏，直到链路选择 - ＆GT;
＆LT; DIV ID =blur_login＆GT;
＆LT;！ - show_login是容器登录表单 - ＆GT;
＆LT; DIV ID =show_login＆GT;
＆LT;一类=OKclose的href =＃＆GT; [关闭] LT; / A＆GT;
＆LT;形式方法=ID =getin＆GT;
＆LT; P＆GT;＆LT;标签=用户名和GT;用户名和LT; /标签＆gt;＆LT; BR /＆GT;
＆LT;输入名称=用户名ID =用户类型=文字大小=14最大长度=14自动完成=关闭的tabindex =1/＆GT;
＆所述; / P＆GT;
＆LT; P＆GT;＆LT;标签=姓氏＆GT;密码＆LT; /标签＆gt;＆LT; BR /＆GT;
＆LT;输入名称=姓氏类型=密码大小=14最大长度=14自动完成=关闭的tabindex =2/＆GT;＆LT; BR /＆GT;
＆LT;标签=错误＆GT;＆LT; /标签＆gt;
＆所述; / P＆GT;
＆LT; P＆GT;＆LT;输入类型=提交ID =发送值=登录和放大器; RARR;＆GT;＆LT; / P＆GT;
＆LT; /形式GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
$（文件）。就绪（函数（）{
$（窗口）.bind（调整大小功能（）{
$（＃blur_login）的CSS（高度，$（窗口）.height（））;
$（＃blur_logout）的CSS（高度，$（窗口）.height（））;
}）;
//调整叠加的高度，以填补屏幕时，页面加载
$（＃blur_login）的CSS（高度，$（文件）.height（））;
$（'＃登录）。点击（函数（）{
$（＃blur_login）淡入（）。
//页关注淡入是用户名输入
$（'＃用户）关注（）。
一个preventDefault。
返回false;
}）;
$（'＃注销）。点击（函数（二）{
$（＃blur_logout）淡入（）。
b preventDefault。
返回false;
}）;
$（'＃发送）。点击（函数（C）{
// AJAX的形式在这里提交
}）;
//功能的登录表单
变量$提交= $（输入[类型=提交]），
$输入= $（'输入[类型=文本]，输入[类型=密码]'）;
//检查是否字段为空，这样的话禁用loginbutton
传播checkEmpty（）{
返回$ inputs.filter（函数（）{
返回$修剪（THIS.VALUE）！。
}）长度=== 0;
}
//启用提交按钮，当人物在每个字段中输入
$ inputs.on（'的keyup模糊'，函数（）{
$ submit.prop（已禁用，checkEmpty（）！）;
}）KEYUP（）。 //触发任何一个
//当选择了密切的联系窗口将淡出
$（OKclose）。点击（函数（D）{
$（＃blur_login）淡出（）。
。ðpreventDefault;
返回false;
}）;
}）;
下面是我在我的网页是：
$（'＃loginbutton）。点击（函数（事件）{
。事件preventDefault（）; / *停止默认窗体上点击提交* /
$（'＃loginbutton）隐藏（）。 //隐藏登录按钮
$（'＃loginprogress）HTML（'＆LT; IMG SRC =网页/ IMGS / loader.gif＆GT;处理'）; //显示进度微调
变种的用户名= $（＃用户名）VAL（）。
。VAR密码= $（＃密码）VAL（）;
$阿贾克斯（{//运行getUnlockedCall（）和返回值形成
网址：ajaxDispatcher.php动作=登录，
数据：用户名='+用户名+'和;密码='+密码，
键入：POST，
成功：功能（数据）{
如果（数据==''）{
$（'＃loginbutton）显示（）。 //显示登录按钮
$（'错误'）显示（）。 //显示登录错误消息
$（'＃loginprogress）HTML（''）。 //显示进度微调
} 其他 {
location.reload（）;
$（'＃注销）显示（）。 //显示注销按钮
$（'＃用户信息）显示（）。
$（'＃loginprogress）隐藏（）。 //隐藏进展微调
}
}
}）;
}）;
在简单地说， #loginbutton 是一个jQuery按钮。在点击它隐藏于prevent一稿多投。调度运行的函数来检查的登录，来自ID为用户名和密码的投入使用传递的价值观。如果成功，如果登录失败则返回错误（显示错误警告），否则会返回值来操作DOM。在这个例子中，它显示了注销按钮，隐藏 loginprogress DIV，并显示一个名为格用户信息。
Ok, so I'm trying to make a new log in form form my site using jquery and classic ASP. As of right now I have a containing div in my document thats set to hidden, then when the user selects the login link the div will fade in overlaying the page with the form. If the user clicks submit, the page will POST and the div overlay is gone. I would really like it to be more smooth than that. So if the users clicks submit, jquery will use ajax or something to post it in the background to a db connect page and then get the response text from that asp displaying either a successful login or incorrect in the errors label.
I use classic asp on my site to fetch the form data on submit with the previous login. then that checks the DB to see if what was entered matches.
I would like to have jQuery handle all this and send the values through a query or other method in the background to the ASP page containing the DB connection so the page doesn't reload when submit is clicked.
I've looked a a hand full of examples and I can't seem to get them going right.
Heres a FIDDLE to look at with the working functions so far.
Any help would be greatly appreciated, Thanks in advance.
<table cellspacing="0" cellpadding="0" width="900" >
<tr>
<a href="index.asp" class="linkheader">Home</a> |
<a href="index1st.asp">1st</a> |
<a href="index2nd.asp">2nd</a> |
<a href="index3rd.asp">3rd</a> |
<a href="index4th.asp">4th</a> |
<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 →"></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;
});
});
Here is what I use in my pages:
$('#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
}
}
});
});
In a nutshell, #loginbutton is a jquery button. On click it hides to prevent multiple submissions. The dispatcher runs a function that checks the login, using the passed values from inputs with id "username" and "password". On success, if the login failed it will return false (showing an error warning), else it will return values to manipulate the dom. In this example, it shows the logout button, hides the loginprogress div, and shows a div called "userinfo".
这篇关于jQuery的无页面重载提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
