AJAX - 不同contentType下前台传JSON到后台

【1】contentType默认为application/x-www-form-urlencoded的情况

① JSP实例如下

var url = "person.action";
var jsonStr = {"name":'ji',"age":20};//object类型
var jsonArrayFinal = JSON.stringify(jsonStr);//string类型

jQuery.ajax({
				type: "post",//put delete get post
				url: url,
 				//dataType : 'json',
/*
预期服务器返回的数据类型 xml html script  json jsonp  text ;
如果不指定，则服务器根据返回数据类型自行判断
*/

				async:true,//默认异步
				data : {mydata:jsonArrayFinal},
				//或{'mydata':jsonArrayFinal}
				
/*
要么使用 \ 对json进行手动转译，要么使用JSON.stringify(jsonStr) 将其转换为字符串类型；
如果不进行转译，使用【2】中的后台接收方法，那么不会报异常，但是获取不到数据。
data : {mydata:jsonStr},//报空指针异常，传不过去
*/
	
 				contentType:"application/x-www-form-urlencoded",//默认值
				success: function(data,textStatus){
					alert(data);
					alert("操作成功");
				},
				error: function(xhr,status,errMsg){
					alert("操作失败!");
				}
				});

---

② 后台接收方法：

使用jacksonJSON框架-Jackson

public String getJson(){
		//参数为键值对方式可以直接使用getParameter方法
		String jsonStr = getRequest().getParameter("mydata");
		System.out.println(jsonStr);
		
		 ObjectMapper objectMapper = new ObjectMapper();
		 try {
			Person person1 = objectMapper.readValue(jsonStr, Person.class);
			System.out.println(person1);
			out(jsonStr);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		 return null;
	}

result as follows :

③ F12查看浏览器控制台：

Remote Address:127.0.0.1:8080
Request URL:http://localhost:8080/JavaSE-JS/person.action
Request Method:POST
Status Code:200 OK
Response Headers//Response Headers
view source
Content-Type:text/html;charset=UTF-8
Date:Wed, 18 Jan 2017 01:31:02 GMT
Server:Apache-Coyote/1.1
Transfer-Encoding:chunked
Request Headers//Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:zh-CN,zh;q=0.8
Connection:keep-alive
Content-Length:51
//contentType
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Cookie:JSESSIONID=E7D60D8B9B3E1958B7077CE26E4EE75A
Host:localhost:8080
Origin:http://localhost:8080
Referer:http://localhost:8080/JavaSE-JS/testAjax1.jsp
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36
X-Requested-With:XMLHttpRequest
Form Data//表单数据
view source
view URL encoded
mydata:{"name":"ji","age":20}

可以看到，此时请求头，contentType为默认值，发送数据在Form Data。

---

【2】contentType默认非application/x-www-form-urlencoded的情况

比如，contentType:"application/json;charset=utf-8",此时，若使用例子一中的后台接收方法，是接收不到数据的。

具体原因请看：post请求参数data的不同形式

① JSP实例如下：

jQuery.ajax({
				type: "post",//put delete get post
				url: url,
// 				dataType : 'json',
//预期服务器返回的数据类型 xml html script  json jsonp  text 

			    async:true,//默认异步
			    contentType:"application/json;charset=utf-8",
 				//data : jsonArrayFinal,
				//{"name":"ji","age":20}
				
				data : {mydata:jsonArrayFinal},
				//mydata={"name":"ji","age":20}---进行了url编码
				//mydata=%7B%22name%22%3A%22ji%22%2C%22age%22%3A20%7D
				
 				//data : jsonStr,
				//参数：name=ji&age=20
				
 				//data : {mydata:jsonStr},
				//mydata[name]=ji&mydata[age]=20-进行了编码-mydata%5Bname%5D=ji&mydata%5Bage%5D=20
				success: function(data,textStatus){
					alert(data);
					alert("操作成功");
				},
				error: function(xhr,status,errMsg){
					alert("操作失败!");
				}
				});

② 后台接收方法：

//contentType 非 application/x-www-form-urlencoded
	public String getRequestPayload() throws IOException {  
		
		HttpServletRequest req = getRequest();
        StringBuilder sb = new StringBuilder();  
        //使用getReader()方法获取Form Data里面数据
        try(BufferedReader reader = req.getReader();) {  
             char[]buff = new char[1024];  
             int len;  
             while((len = reader.read(buff)) != -1) {  
                      sb.append(buff,0, len);  
             }  
        }catch (IOException e) {  
                 e.printStackTrace();  
        }  
        String sb2 = URLDecoder.decode(sb.toString(),"UTF-8");
        /*
         * 解码前：mydata=%7B%22name%22%3A%22ji%22%2C%22age%22%3A20%7D 
         * 解码后：mydata={"name":"ji","age":20}
         */
        out(sb2); 
        System.out.println(sb2);
        return null;
	}  

第一种情况：data : jsonStr,，后台获取值name=ji&age=20；
第二种情况：data : {mydata:jsonStr},，后台获取值

进行了URL编码：mydata%5Bname%5D=ji&mydata%5Bage%5D=20
解码后：mydata[name]=ji&mydata[age]=20

第三种情况：data : jsonArrayFinal,，后台获取值{"name":"ji","age":20}；
第四种情况：data : {mydata:jsonArrayFinal},，后台获取值

进行了URL编码：mydata=%7B%22name%22%3A%22ji%22%2C%22age%22%3A20%7D

解码后：mydata={"name":"ji","age":20}

③ F12查看浏览器控制台：

Remote Address:127.0.0.1:8080
Request URL:http://localhost:8080/JavaSE-JS/person2.action
Request Method:POST
Status Code:200 OK
Response Headers
view source
Content-Type:text/html;charset=UTF-8
Date:Wed, 18 Jan 2017 01:43:03 GMT
Server:Apache-Coyote/1.1
Transfer-Encoding:chunked
Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:zh-CN,zh;q=0.8
Connection:keep-alive
Content-Length:22
//Content-Type:application/json;charset=UTF-8
Content-Type:application/json;charset=UTF-8
Cookie:JSESSIONID=E7D60D8B9B3E1958B7077CE26E4EE75A
Host:localhost:8080
Origin:http://localhost:8080
Referer:http://localhost:8080/JavaSE-JS/testAjax1.jsp
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36
X-Requested-With:XMLHttpRequest
Request Payload//此时，数据在这里 ！
view source
{name: "ji", age: 20}
age: 20
name: "ji"

---

【3】Tips

• 若使用默认contentType，则data请使用key：value形式，且如果value为json，进行转译；

• 若使用自定义contentType(如application/json)，则data如果使用value形式，转译与否看后台接收方法；如果使用key:value形式，后台要进行URL解码！

• 若使用自定义contentType,第一种后台方法是获取不到数据的，请使用第二种后台接收方法；

• 上面json是手动拼接，也可以可以直接获取json如下：

var jsonStr = $('#editform').serializeArray();//JSON Object
jsonStr = JSON.stringify(queryString);//JSON string