一、摘要:(这里全部以登录举例子)
利用springmvc传递数据,需要用到一个注解:@ResponseBody,他的作用是将以前gson或者阿里包上面的对转换成json类型的字符串就用注解就能实现数据的转换
二、ajax传递一般对象
/**
controller层代码
*/
//使用ajax方式实现登录(使用:springmvc内置包实现)
@RequestMapping(value="/loginajax2")
@ResponseBody
public Users loginajax2(String username,String password,HttpSession session){
Users user=null;
if(username.equals("admin")&&password.equals("123")){
//登录成功后把用户的信息保存在session中
session.setAttribute("user", username);
user=new Users(username, password);
}
return user;//将实体对象返回到前端页面
}
/**
jsp前端ajax获取数据的方式
*/
function checklogin(){
//获得前端所在标签的数据
var username=$("#username").val();
var password=$("#password").val();
//判断用户名或密码不能为空
if(username==""||password==""){
$("#info").html("用户名或者密码不能为空");
}else{
$.ajax({
url:"loginajax2",
type:"post",
data:{
"username":username,
"password":password
},
dataType:"json",
success:function(result){
if(result!=null){
$("#info").html(result.username+"登录成功");
}else{
$("#info").html("登录失败");
}
},
error:function(){
alert("error");
}
});
}
}
三、ajax传递集合对象
/**
controller层代码
*/
//使用ajax方式把集合转换为json数组
@RequestMapping("/responselist")
@ResponseBody
public List<Users> responselist() {
List<Users> list = new ArrayList<Users>();
Users u1 = new Users();
u1.setUsername("王鹏");
u1.setPassword("123");
Users u2 = new Users();
u2.setUsername("李思");
u2.setPassword("456");
list.add(u1);
list.add(u2);
return list;
}
/**
前端jsp进行集合遍历
*/
function select(){
$.ajax({
url : "responselist", //提交地址
type : "post", //提交方式
dataType : "json", //返回的数据类型
success : function(result) {
//保留表格第一行tr,移除第二行tr里的内容
$("#userTable tr:gt(0)").remove();
var viewData = "";
//遍历数据,这里的数据遍历,可以直接在值(n)这个对象中 点加上实体类的属性名,
就能得到所需要的数据
$.each(result, function(i, n){
viewData += "<tr>";
viewData += "<td>" + n.username + "</td>";
viewData += "<td>" + n.password + "</td>";
viewData += "</tr>";
});
//绑定tr数据
$("#userTable").append(viewData);
}
});
}
四、返回两个集合,把两个集合数据转换成String字符串的形式
/**
后台controller层的代码
*/
//使用ajax方式把集合转换为json字符串,这里设置了一个响应的编码格式
@RequestMapping(value="/responselisttostring",produces="application/json;charset=UTF-8;")
@ResponseBody
public String responselisttostring() {
List<Users> list = new ArrayList<Users>();
Users u1 = new Users();
u1.setUsername("王鹏");
u1.setPassword("123");
Users u2 = new Users();
u2.setUsername("李思");
u2.setPassword("456");
list.add(u1);
list.add(u2);
List<Users> list2 = new ArrayList<Users>();
Users u3 = new Users();
u3.setUsername("王小鹏");
u3.setPassword("567");
Users u4 = new Users();
u4.setUsername("张三丰");
u4.setPassword("896");
list2.add(u3);
list2.add(u4);
//利用JSONObject(阿里包提供的类),将集合对象put进obj中,转换为json字符串返回到
//前端页面
JSONObject obj = new JSONObject();
obj.put("list", list);
obj.put("list2", list2);
System.out.println(obj.toJSONString());
//返回的是json字符串
return obj.toJSONString();
}
/**
前端ajax遍历数据的方式
*/
function select(){
$.ajax({
url : "responselisttostring", //提交地址
type : "post", //提交方式
dataType : "json", //返回的数据类型
success : function(result) {
//保留表格第一行tr,移除第二行tr里的内容
$("#userTable1 tr:gt(0)").remove();
var viewData = "";
//遍历数据,注意,这里在遍历数据时,直接用打点的方式,进行取值即可
$.each(result.list, function(i, n){//遍历结果集(json字符串)result里面的list集合。
viewData += "<tr>";
viewData += "<td>" + n.username + "</td>";
viewData += "<td>" + n.password + "</td>";
viewData += "</tr>";
});
//绑定tr数据
$("#userTable1").append(viewData);
//保留表格第一行tr,移除第二行tr里的内容
$("#userTable2 tr:gt(0)").remove();
var viewData = "";
//遍历数据
$.each(result.list2, function(i, n){
viewData += "<tr>";
viewData += "<td>" + n.username + "</td>";
viewData += "<td>" + n.password + "</td>";
viewData += "</tr>";
});
//绑定tr数据
$("#userTable2").append(viewData);
}
});
}
四、需要的jar包:
百度网盘:https://pan.baidu.com/s/1eDU633XGNizG7CPCGPOCrA
提取码:opne