JQuery中Ajax实现对Map,List集合数据的接收
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>json值的类型有哪些
<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").user1.username+"<br>");
}else
$("#msg").html("");
$("#msg").append(data.msg);
},
error:function(){
alert("登陆失败！")
}
})
});
});
前端部分代码⽐较简单，就是⼀个登陆框，以json数据格式的⽅式提交给后台，请求成功时，输出传回的实体对象型数据，List集合型数据，以及关键的Map型集合数据
<package name="default"namespace="/"extends="json-default">
<action name="login"class="com.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".Username())&&"111111".Password())){
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⽅法是⽆法获取到前台发过来的数据的。
列出此过程⼏个⽐较重要的核⼼知识点
1. 前台Ajax的格式书写，包括发送给后台的json数据，以及对后台传回数据的接收，注意map、list以及实体对象型数据的接收⽅式。对
于数组类型的数据还存在遍历的问题，过程并不复杂，故此处并未列出
2. l的配置。在l中，必须继承json-default，⽽继承此package⼜需要相关的jar包⽀持，因此必须在项⽬开始前引
⼊徐昂管的jar包。l中还应注意< result >中type属性应为json，默认的是dispatcher，进⾏json数据传输时⼀定得改为json。最后就是< param >的includeProperties属性。此处是设置传回前台的数据类型。哪些可以传回去，哪些不⾏，都可以在此处进⾏设置，类似于过滤的作⽤
3. action的编写，⼀定要继承⾃actionSupport(实现action接⼝也可以，不过相对要⿇烦⼀些)。然后就是为相关属性设置setter和
getter⽅法，这⼀步是必须的，不然接收不到前台传来的数据。最后就是在指定的⽅法中进⾏相关的业务处理，过程并不复杂。
4. 外加⼀个刚遇到的⼀个问题。当从后台返回的数据仅有⼀个字符串时，若想从前台取出该字符串，直接调⽤data即可，不⽤写
成”data.XXX”的形式。写了反⽽会报undefined的错误。谨记谨记
欢迎对此还有疑问的⼩伙伴在评论去留⾔，我有空时会及时解答的(づ｡◕‿‿◕｡)づ

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。