jQuery中Ajax接收后台Map、List集合数据实现过程
最近学习到jQuery实现异步传输数据部分，虽然跟着视频演练了常规json数据的接收，但个人感觉不太够，现实应用中肯定不只是传输简短以及简单的json数据，于是自己琢磨着尝试从后台接收List、Map数据，在搜索工具的帮助以及自身的理解下，成功完成了接收过程。废话不多说，以代码来展示过程：
* 前端jsp登录端代码+js代码
//body部分
<body>
<div id="loginDemo">
用户名:<input type="text" id="username"><br>
密 码<input type="password" id="password"><br>
<input type="button" value="登录" id="btn"/><br>
<span id="msg"></span>
</div>
<div id="showUsers"></div>
</body>
//js部分
$(document).ready(function(){
$("#btn").click(function(){
var params ={"user.username":$("#username").val(),
"user.password":$("#password").val()};
$.ajax({
url:"login",
type:"post",
data:params,//将json数据传给后台，供后台处理
dataType:"json",
success:function(data){
if(data.msg=="登陆成功！"){
//以User对象方式接收
$("#loginDemo").append(data.user.username+"<br>");
//以List集合对象users接收，在后台是集合对象，但传回前台后自动转换成了数组对象
$("#loginDemo").append(data.users[0].username+"<br>");
//以Map对象m接收，Ajax默认支持Map类型数据，细想一下，map型数据不有点像json数据吗
$("#loginDemo").append(data.m.user1.username+"<br>");
}else
$("#msg").html("");
$("#msg").append(data.msg);
},
error:function(){
alert("登陆失败！")
}
})
});
});前端部分代码比较简单，就是一个登陆框，以json数据格式的方式提交给后台，请求成功时，输出传回的实体对象型数据，List集合型数据，以及关键的Map型集合数据
struts.xml核心部分代码
<package name="default" namespace="/" extends="json-default">
<action name="login" class="com.cn.action.UserAction" method="login">
<result type="json">
<param name="includeProperties">
user.*,users.*,msg,m.*
</param>
</result>
</action>
</package>
//注意一定要继承json-default，且要提前引入相关的jar包，对于代码里面各参数的作用以及用法就不作过多赘述了
action中核心代码
public class UserAction extends ActionSupport {
private User user;
private List<User> users;
private Map<String,User> m ;
private String msg;
public String login(){
if("admin".equals(user.getUsername())&&"111111".equals(user.getPassword())){
user = new User("admin","111111");
//创建集合对象
users = new ArrayList<User>();
users.add(new User("Linda","memeda"));
users.add(new User("Mary","lalala"));
users.add(user);
//创建map对象
m = new HashMap<String,User>();
m.put("user1", new User("XiaoJing","yuyuyu"));
m.put("user2", new User("KangGe","kangying"));
msg = "登陆成功！";
}else{
msg = "登录失败3";
}
return SUCCESS;
}
//后续对成员属性的setter和getter方法没有列出，没有列出并不代表不重要，如果没有设置setter和getter方法是无法获取到前台发过来的数据的。列出此过程几个比较重要的核心知识点
- 前台Ajax的格式书写，包括发送给后台的json数据，以及对后台传回数据的接收，注意map、list以及实体对象型数据的接收方式。对于数组类型的数据还存在遍历的问题，过程并不复杂，故此处并未列出
- struts.xml的配置。在struts.xml中，必须继承json-default，而继承此package又需要相关的jar包支持，因此必须在项目开始前引入徐昂管的jar包。struts.xml中还应注意< result >中type属性应为json，默认的是dispatcher，进行json数据传输时一定得改为json。最后就是< param >的includeProperties属性。此处是设置传回前台的数据类型。哪些可以传回去，哪些不行，都可以在此处进行设置，类似于过滤的作用
- action的编写，一定要继承自actionSupport(实现action接口也可以，不过相对要麻烦一些)。然后就是为相关属性设置setter和getter方法，这一步是必须的，不然接收不到前台传来的数据。最后就是在指定的方法中进行相关的业务处理，过程并不复杂。
- 外加一个刚遇到的一个问题。当从后台返回的数据仅有一个字符串时，若想从前台取出该字符串，直接调用data即可，不用写成”data.XXX”的形式。写了反而会报undefined的错误。谨记谨记
6967
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
