在SpringMVC中使用Ajax传递Json数据:
这里先说一下Json,是一种轻量级的数据交换格式;其语法为:
1、它采用键值对的方式保存数据,
2、数据由逗号分隔,
3、花括号保存对象,
4、方括号保存数组.
5.在jQuery1.4版本以后修正了Json的格式,json格式必须为:{"userName":"Edifier","age":"24",isMarry:false}即字符串和数字类型的数据都需要加""双引号,而布尔类型可以不用。
这里使用jQuery调用Ajax(这里引用的是jquery_1.8.1.js):
$(document).ready(function(){ //页面加载完毕后执行的方法
$("#add").click( function (){ //给id为add的标签增加一个onclick事件,方法如下:
var userName = $("#userName").attr("value"); //获取id为userName标签的value值并赋值给userName
var age = $("#age").attr("value");
var sex = $("#sex").attr("value");
var user = {userName:userName,age:age,sex:sex}; //这样赋值是允许的。前一个userName是key,后一个是value
$.ajax({
url:"data/addUserJson", //所要请求的controller映射方法
type:"post", //请求类型get/post
data:user, //要传递给后台的数据
success:function(msg){ //执行成功后页面所要执行的方法,msg用以接受后台返回的数据可以为任意名字
alert("userName-->" + msg.userName+",age-->" + msg.age+",sex-->" + msg.sex);
},
error:function(){ //执行失败后页面所要执行的方法
alert("error");
},
});
});
});
body里面的内容如下:
姓名:<input type="text" name="userName" id="userName"/><br/>
年龄:<input type="text" name="age" id="age"/><br/>
性别:<input type="text" name="sex" id="sex"/><br/>
<input type="button" id="add" value="添加">
以上是页面上的内容。
后台处理部分如下:
@RequestMapping("/addUserJson")
public void addUserJson(User user,HttpServletResponse response){
//这里拼接出要传递到前台的json
String result="{\"userName\":\""+user.getUserName()+"\",\"age\":\""+user.getAge()+"\",\"sex\":\""+user.getSex()+"\"}";
PrintWriter out = null; //定一个PrintWriter对象
response.setContentType("application/json"); //设置response的ContentType,因为是用json传输,所以这里要设置为application/json
response.setCharacterEncoding("UTF-8"); //防止乱码,设置编码,保证统一
response.setHeader("Cache-Control", "no-cache");//取消缓存
try {
out = response.getWriter(); //获取页面的输出对象
out.write(result); //将要传递到前台的内容放进输出对象中打印
} catch (IOException e) {
e.printStackTrace();
}
out.close(); //关闭输出对象
}
以上就是后台部分,这里需要注意的是此方法为void方法。否则前台页面会有问题。