在 Spring mvc3中，响应、接受JSON都十分方便。
使用注解@ResponseBody可以将结果（一个包含字符串和JavaBean的Map或者一个List），转换成JSON。
使用@RequestBody 注解前台只需要向Controller 提交一段符合格式的JSON，Spring 会自动将其拼装成 bean。
Spring这个转换是靠org.codehaus.jackson这个组件来实现的，所有需要引入jackson-core-asl和jackson-mapper-asl两个jar包。
注：@RequestBody接收的是一个Json对象的字符串，而不是一个Json对象。然而在ajax请求往往传的都是Json对象，后来发现用 JSON.stringify(data)的方式(需要下载json2.js文件并引入到项目中)就能将对象变成字符串。同时ajax请求的时候也要指定dataType: "json",contentType:"application/json" 这样就可以轻易的将一个对象或者List传到Java端，使用@RequestBody即可绑定对象或者List.
页面效果图：
js代码：
<script type="text/javascript">
//将一个表单的数据返回成JSON对象
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [ o[this.name] ];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
$(document).ready(function(){
var student = new Object();
var thing = '{"plugin": "jquery-json", "version": "2.3"}';
var encoded = $.parseJSON( thing );
//alert(encoded);
//提交Form表单
$("#btn1").click(function() {
var jsonuserinfo = JSON.stringify($('#form1').serializeObject());
alert(jsonuserinfo);
$.ajax({
type : 'POST',
contentType : 'application/json',
url : '<%=request.getContextPath()%>/User/addUserInfo',
data : jsonuserinfo,
dataType : 'json',
success : function(data) {
alert("新增成功！");
},
error : function(data) {
alert("error")
}
});
});
//提交Form表单，另一种方式
$("#btn2").click(function(){
var url='<%=request.getContextPath()%>/User/addUserInfo';
var data={"user_name":$("#userName").val(),"user_sex":$("#userSex").val(),"user_age":$("#userAge").val(),
"user_email":$("#userEmail").val(),"user_telephone":$("#userTelephone").val(),"user_education":$("#userEducation").val(),
"user_title":$("#userTitle").val()};
$.ajax({
type:'POST',
contentType : 'application/json',
url:url,
dataType:"json",
data:JSON.stringify(data),
async:false,
success:function(data){
},
error: function(XMLHttpRequest, textStatus, errorThrown){
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
})
})
//提交多个对象
$("#btn3").click(function(){
var url='<%=request.getContextPath()%>/User/saveUserInfo';
var saveDataAry=[];
var data1={"user_name":"zhangsan","user_age":"25","user_email":"zhangsan@sina.com"};
var data2={"user_name":"lisi","user_age":"26","user_email":"lisi@sina.com"};
saveDataAry.push(data1);
saveDataAry.push(data2);
$.ajax({
type:'POST',
contentType : 'application/json',
url:url,
dataType:"json",
data:JSON.stringify(saveDataAry),
async:false,
success:function(data){
},
error: function(XMLHttpRequest, textStatus, errorThrown){
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
})
})
//get方式
$("#btn4").click(function(){
$.ajax( {
type : 'GET',
contentType : 'application/json',
url : '<%=request.getContextPath()%>/User/list',
dataType : 'json',
data:'id=111&str=abc',
success : function(data) {
if (data && data.success == "true") {
alert("共" + data.total + "条数据。");
$.each(data.data, function(i, item) {
alert("姓名：" + item.user_name + "，年龄：" + item.user_age
+ "，性别：" + item.user_sex);
});
}
},
error : function() {
alert("error")
}
});
})
//post传参，方式一
$("#btn5").click(function(){
var data={"user_id":"111","user_name":"abc","user_email":"aaa@sina.com"};
$.ajax({
url:'<%=request.getContextPath()%>/User/loadData',
type:'POST',
//data也可设置成"user_id=111&user_name=abc&user_email=aaa@sina.com"这种方式
data:data,
//contentType : 'application/json',
//返回List或Map，dataType要设置为“json”.
dataType:'json',
success:function(data){
$(data).each(function (i, value) {
alert(value);
});
},
error : function() {
alert("error")
}
})
})
//post传参，方式二
$("#btn6").click(function(){
var data={"user_id":"111","user_name":"abc","user_email":"aaa@sina.com"};
$.ajax({
url:'<%=request.getContextPath()%>/User/loadData1',
type:'POST',
data:data,
//contentType : 'application/json',
//只返回一个字符串，dataType要设置为“html”.
dataType:'html',
success:function(data){
alert(data);
},
error : function() {
alert("error")
}
})
})
})
</script>
Action代码：
/**
* springmvc与Ajax交互
* @return
*/
@RequestMapping(value="/springmvcAjax")
public ModelAndView springmvcAjax(){
ModelAndView mv=new ModelAndView();
//添加模型数据可以是任意的POJO对象
mv.addObject("sexList",commonService.getDict("SEX"));
mv.addObject("educationList",commonService.getDict("EDUCATION"));
mv.addObject("titleList",commonService.getDict("TITLE"));
mv.addObject("deptList",commonService.getDept());
mv.setViewName("user/springmvcAjax");
return mv;
}
/**
* ajax的post方式提交表单
* @param user
* @return
*/
@RequestMapping(value="/addUserInfo",method=RequestMethod.POST)
@ResponseBody
public String addUserInfo(@RequestBody User user){
System.out.println("user_name--------"+user.getUser_name());
System.out.println("user_sex--------"+user.getUser_sex());
System.out.println("user_age--------"+user.getUser_age());
System.out.println("user_email--------"+user.getUser_email());
System.out.println("user_title--------"+user.getUser_title());
System.out.println("user_education--------"+user.getUser_education());
System.out.println("user_telephone--------"+user.getUser_telephone());
return "";
}
/**
* ajax提交多个对象
* @param users
* @return
*/
@RequestMapping(value = "/saveUserInfo", method = RequestMethod.POST)
@ResponseBody
public String saveUserInfo(@RequestBody List<User> users) {
if(users!=null && users.size()>0){
for(int i=0;i<users.size();i++){
System.out.println("user_name--------"+users.get(i).getUser_name());
System.out.println("user_age--------"+users.get(i).getUser_age());
System.out.println("user_email--------"+users.get(i).getUser_email());
}
}
return "";
}
/**
* ajax的Get方式
* @param id
* @param str
* @return
*/
@RequestMapping(value = "/list", method = RequestMethod.GET)
@ResponseBody
public Map<String, Object> list(@RequestParam(value="id") String id,@RequestParam(value="str") String str) {
List<User> list = new ArrayList<User>();
User um = new User();
um.setUser_name("zhangsan");
um.setUser_age(25);
um.setUser_sex("男");
list.add(um);
Map<String, Object> modelMap = new HashMap<String, Object>(3);
modelMap.put("total", "1");
modelMap.put("data", list);
modelMap.put("success", "true");
return modelMap;
}
/**
* ajax post方式传参,通过@RequestParam接收
* @param user_id
* @param user_name
* @param user_email
* @return
*/
@RequestMapping(value="/loadData")
@ResponseBody
public List loadData(@RequestParam(value="user_id") int user_id,@RequestParam(value="user_name") String user_name,
@RequestParam(value="user_email") String user_email){
System.out.println(user_id);
System.out.println(user_name);
System.out.println(user_email);
List<String> list=new ArrayList<String>();
list.add("电视");
list.add("空调");
list.add("电冰箱");
return list;
}
/**
* ajax post方式传参，通过request.getParameter方式接收
* @param user_id
* @param user_name
* @param user_email
* @return
*/
@RequestMapping(value="/loadData1")
@ResponseBody
public String loadData1(HttpServletRequest request,HttpServletResponse response){
String user_id=request.getParameter("user_id");
String user_name=request.getParameter("user_name");
String user_email=request.getParameter("user_email");
String result="success";
return result;
}解释：
1、post提交Form表单的两种方式没有什么本质区别，都是先将Form表单转换成Json对象，然后再利用JSON.stringify方法转换成Json格式的字符串，只不过方式一是调用serializeObject方法将Form表单转换成Json对象，而方式二是自定义一个Json对象。
2、post方式，接收参数有两种方式，一种是通过@RequestParam获取，另一种是通过request.getParameter方式获取。返回数据的时候，如果返回的是List或Map，ajax的dataType要设置为"json"，而如果返回的是一个字符串，dataType要设置为"html"。
扫一扫
776
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
