初学AJAX JSON调用

前端之家收集整理的这篇文章主要介绍了初学AJAX JSON调用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近新有一个任务,要求在用户登录的时候,输入用户登录名,同时在其旁边显示用户的真正名字,如果没有这个名字,则显示用户不存在,刚开始的时候完全不知道怎么下手,这是一个关于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>

HTML代码

<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; }

猜你在找的Ajax相关文章