假如有一个登录表单代码如下:
<div><span>用户</span><input id="username" type="text" name="username" value="" /></div>
<div><span>密码</span><input id="password" type="password" name="password" value="" /></div>
<div><input type="button" value="登录" /><input type="button" value="重置" /></div>
<div id=”loading”></div>
需要在点击“登录”按钮时,出现”Load… …”效果。
假如jquery的js引用后,使用$post请求时作出处理。
发送ajax请求的代码:
$(“.input_login”).click(function(){
var username = $.trim($(“#username”).val());
var password = $.trim($(“#password”).val());
if(username==null || username==”"){
alert(“请输入用户名!”);
$(“#username”).focus();
return;
}
if(password==null || password==”"){
alert(“请输入密码!”);
$(“#password”).focus();
return;
}
$(“#loading”).html(“<strong>Loading<span id=\”interval\”></span></strong>”);
window.setInterval(loading, 300);
$.post(“login” ,
{“username” : username ,
“password” : password} ,
function(data){
$(“#loading”).empty();
if(data.value == true){
var path = $(“base”).attr(“href”);
location.replace(path+”home/index”);
}else{
alert(“用户名或密码错误”);
$(“.input_reset”).click();
}
},’json’);
});
$(document).keydown(function(event){
if(event.keyCode == 13){
$(“.input_login”).click();
}
});
});
出现Loading后面的…的循环方法:
function loading(){
var temp = $(“#interval”).text();
if(temp.length<6){
$(“#interval”).text(temp+”.”);
}else{
$(“#interval”).text(“”);
}
}