ajax-form表单快速传递参数

serialize()方法 序列化表单内容为字符串,用于Ajax请求

当表单中要提交的参数比较多时,就可以使用该方法进行提交当表单中要提交的参数比较多时,就可以使用该方法进行提交

function update_PTInfo() {
	var formatter = $("#update_frm").serialize();
	$.ajax({
		type: "POST",
		url: "/pt-sts/updateUserInfo",
		data: formatter,
		dataType: "json",
		success: function(result){
			console.log(result.msg);
			console.log(result);
		}
	});
};

方法一：controller后台接受，和普通接受参数一样

异步获取 json 数据，加上 @ResponseBody 后，会直接返回 json 数据。

//修改个人信息
@ResponseBody
@RequestMapping(value = "updateUserInfo")
public Map<String, Object> updateUserInfo(User user,HttpServletRequest request){
	Map<String,Object> resultMap = new HashMap<>();
	String user_name = request.getParameter("user_name");
	String user_sex = request.getParameter("user_sex");
	System.out.println("账号=="+user_name);
	System.out.println("单选框=="+user_sex);
	System.out.println("当前对象："+user);
	resultMap.put("code",001);
	resultMap.put("msg","SUCCESS");
	resultMap.put("data",user);
	return resultMap;
}

方法二：另外一种写法

JSON.toJSONString是将对象转化为Json字符串返回

//修改个人信息
@ResponseBody
@RequestMapping(value = "updateUserInfo")
public String updateUserInfo(User user,HttpServletRequest request){
	Map<String,Object> resultMap = new HashMap<>();
	String user_name = request.getParameter("user_name");
	String user_sex = request.getParameter("user_sex");
	System.out.println("账号=="+user_name);
	System.out.println("单选框=="+user_sex);
	System.out.println("当前对象："+user);
	resultMap.put("code",001);
	resultMap.put("msg","SUCCESS");
	resultMap.put("data",user);
	return JSON.toJSONString(resultMap); //将对象转化为json字符串
}

查看控制台信息，都是同样的效果

---

方法一和二 ：ajax发送请求时，没有写dataType: “json”,预期服务器返回的数据类型

 function update_PTInfo() {
	 var formatter = $("#update_frm").serialize();
	 $.ajax({
		 type: "POST",
		 url: "/pt-sts/updateUserInfo",
		 data: formatter,
		 //dataType: "json", //没有预期指定服务端返回数据格式
		 success: function(result){
			 console.log(result.msg);
			 console.log(result);
		 }
	 });
 };

我们再请求同样的地址，查看控制台会发现，方法一正常，方法二取不到单个值了

---

---

console.log(result.msg);//取不到值了

这时候怎么做呢？

jQuery.parseJSON()函数 将格式完好的JSON字符串转为与之对应的JavaScript对象：所谓"格式完好"，就是要求指定的字符串必须符合严格的JSON格式。将方法二ajax改为如下，即可正常处理json。

function update_PTInfo() {
	var formatter = $("#update_frm").serialize();
	$.ajax({
		type: "POST",
		url: "/pt-sts/updateUserInfo",
		data: formatter,
		//dataType: "json",
		success: function(result){
			var res = $.parseJSON(result);  //用jQuery处理传过来的json值
			console.log(res.msg);
			console.log(res);
		}
	});
};

综上两种方法的注意点，区别，方法一明显写法更简单。