最近新有一个任务,要求在用户登录的时候,输入用户登录名,同时在其旁边显示出用户的真正名字,如果没有这个名字,则显示该用户不存在,刚开始的时候完全不知道怎么下手,这是一个关于jquery ajax json加上后台struts action的处理,现在在此贴上部分代码,希望对一些跟我一样初学的孩纸有帮助。
js代码:
<sccript src="css/jquery-1.8.3.min.js"></sccript>
<script type="text/javascript">
$("#userid").blur(function(){
var account = $("#userid").val();
if(account==""){ //在这里判断,如果输入用户名为空,则不需要进行AJAX处理
return false;
}else{
$.ajax({
type:"post",//请求方式
dataType:"json",
contentType:"application/x-www-form-urlencoded; charset=utf-8",
url:"/xx/user_xx.do",//这里是跳转到action中处理
data:{ //发送给数据库的数据
"userid":account
},
//请求成功后的回调函数参数
success:function(data){
//alert(data[0].name);
$("#lb").html(data[0].name); //json的取值方式传回给页面,显示在id为lb的span标签内
}
});
}
})
</script>
<table border="0" cellpadding="0" cellspacing="0" class="input_wrap">
<tr>
<td style="width:60px;" align="right">警 员</td>
<td align="right"><input name="userid" id="userid"/></td>
</tr>
<tr>
<td style="width:60px;" align="right">警员名</td>
<td align="center"><span id="lb" style="color: red;width:100px"></span></td>
</tr>
<tr>
<td style="width:60px;" align="right">密 码</td>
<td align="right"><input name="password" id="password" type="password"/></td>
</tr>
<tr>
<td id="loginBtnCtn" colspan="2" align="right"></td>
</tr>
</table>
action 方法处理:
@AuthorityAnnotation(permission = Permission.NO_SESSION) public String xx() { String username = extor.getValue("userid"); UserDto user = service.login(username,extor.getValue("password")); JSONObject json = new JSONObject(); UserDto ud = service.findByAccount(username); String str="[{\"name\":\"<font>没有这个用户</font>\"}]"; if(ud!=null){ JSONArray jsonArray = JSONArray.fromObject(ud); //System.out.println(jsonArray.toString()); str=jsonArray.toString(); } printOutText(str); //这是一个封装的方法,将action中处理出来的json值传回页面ajax,也可以用其他方式实现 return null; }