上一篇​的讲解传到后台的参数形式为​​username=yanshi02&password=123456​​ 字符串。

那么如果传到后台的格式是JSON呢?

可能有人会问,如果参数形式为{mydata:username=yanshi02&password=123456}呢?我实在不理解,如果传字符串过来 ,你为何还要使用这种形式?字符串那么好解析!

实例如下:

queryString = $('#editform').serializeArray();//object
queryString = JSON.stringify(queryString);//string
queryString 形式如下:
[{"name":"username","value":"admin"},{"name":"password","value":"123456"}]

//将其封装为{key:value}形式传输
$.post(url,{mydata:queryString},function(data){});

请求头中内容类型为默认值​​Content-Type:application/x-www-form-urlencoded​​。


【1】JSP页面

<script type="text/javascript" src="./scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
var url ="";
var queryString = "";
$(function(){
$("input[type='button']").click(function(){
url = $("#editform").attr("action");
//alert(url);
//queryString = $('#editform').serialize();
queryString = $('#editform').serializeArray();
queryString = JSON.stringify(queryString);//string
alert(queryString);
//[{"name":"username","value":"yanshi02"},{"name":"password","value":"123456"}]

$.post(url,{mydata:queryString},function(data){

alert(typeof data+" ,返回的内容为 "+data);
//var jsonReturn = this.data;
//var jsonReturn = eval("("+data+")");
//var jsonReturn = $.parseJSON(data);
var jsonReturn = JSON.parse(data);//将JSON字符串转换为对象
alert(typeof jsonReturn+" 转换后内容 "+jsonReturn);

// 第一种json数组遍历方式
for(var i=0;i<jsonReturn.length;i++){
for(var key in jsonReturn[i]){
alert(key+':'+jsonReturn[i][key]);
$("#content").append(jsonReturn[i][key]);
}
}
}
</script>
</head>

<body>
This is my JSP page. <br>
<form id="editform" action="postServlet3" method="post">
<input type="text" name="username" value=""/>
<input type="password" name="password" value=""/>

</form>
<input name="post" type="button" value="提交"/>
</body>
</html>

【2】后台接收

import org.codehaus.jackson.map.ObjectMapper;

public class PostServlet3 extends HttpServlet {

/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

doPost(request, response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/html");
PrintWriter out = response.getWriter();

String jsonStr = request.getParameter("mydata");
System.out.println(jsonStr);
ObjectMapper mapper = new ObjectMapper();

String resultJson = mapper.writeValueAsString(jsonStr);
System.out.println("resultJson ..."+resultJson);

out.print(resultJson);
out.flush();
out.close();
}

}

result as follows :

//获取的参数
[{"name":"username","value":"yanshi02"},{"name":"password","value":"123456"}]
//转换的JSON
resultJson ..."[{\"name\":\"username\",\"value\":\"yanshi02\"},{\"name\":\"password\",\"value\":\"123456\"}]"

题外话:

① 若不进行转换,直接返回​​out.println(jsonStr)​​,那么页面可以正常解析data为[object object,object,object]—JSON数组对象;

  • 拿到返回的data【此时拿到的为json string】

AJAX - $.post(url,data,function,type)-2(data为json字符串)_ajax

  • 将字符串数组对象解析为JSON数组对象【解析为json object】

AJAX - $.post(url,data,function,type)-2(data为json字符串)_json_02

  • 正常遍历JSON数组对象!

AJAX - $.post(url,data,function,type)-2(data为json字符串)_字符串_03

② 若进行转换,返回​​out.println(resultJson)​​,则不能正常解析为JSON数组对象进行遍历:

  • 拿到返回的data,type为string

AJAX - $.post(url,data,function,type)-2(data为json字符串)_post_04

  • 尝试进行JSON解析【失败,还是string】

AJAX - $.post(url,data,function,type)-2(data为json字符串)_json_05

  • 按照string字符串数组进行遍历!

AJAX - $.post(url,data,function,type)-2(data为json字符串)_json数组_06


Tips:

该文使用的是jackjson进行操作。无论前端页面或者后台,在接收或者解析json的时候注意 typeof json,究竟是字符串还是json object 或者是json 数组对象!