使用window.setInterval设置登录前…

假如有一个登录表单代码如下：

<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(“”);

}

}