0
点赞
收藏
分享

微信扫一扫

AJAX - $.post(url,data,function,type)-3(参数形式value-type-json)

讲解到如果传到后台的参数为:

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

$.post(url,{mydata:queryString},function(data){ });
即,参数形式为 {mydata:jsonArrayString}

如果形式为

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

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

即,参数形式为 : jsonArrayString

此时后台如何接收?

就像第一篇​所讲解的那样,使用​​request.getReader​​从FormData中获取数据!

后台接收方法

import org.codehaus.jackson.map.ObjectMapper;

public class PostServlet4 extends HttpServlet {

/**
* queryString = $('#editform').serializeArray();
queryString = JSON.stringify(queryString);//string
*/


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("application/json");
PrintWriter out = response.getWriter();

//queryString = $('#editform').serializeArray();//object
//queryString = JSON.stringify(queryString);//string
String jsonString =getStringFromReq(request) ;
System.out.println("jsonString..."+jsonString);

ObjectMapper objectMapper = new ObjectMapper();
String resultJson = objectMapper.writeValueAsString(jsonString);
System.out.println("resultJson ..."+resultJson);

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

public String getStringFromReq(HttpServletRequest request) {

StringBuilder sb = new StringBuilder();
try {
BufferedReader reader = request.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 resultString = sb.toString();

return resultString;

}

}

result as follows :

//初始化servlet
postServlet init().......

//读取到的string
jsonString...[{"name":"username","value":"yanshi02"},{"name":"password","value":"123456"}]

//返回json
resultJson ..."[{\"name\":\"username\",\"value\":\"yanshi02\"},{\"name\":\"password\",\"value\":\"123456\"}]"

特别提醒

① 若直接返回 jsonString,那么JSP页面可以正常解析并遍历JSON数组;

【就像系列-2所描述的那样,此时的jsonString type 为string;所以JSP使用data的时候一定要判断一下 typeof data,如果为object,那么可以试着直接作为json object使用。如果为string,必须进行转换解析!】

AJAX - $.post(url,data,function,type)-3(参数形式value-type-json)_post

  • 转换为JSON数组对象

AJAX - $.post(url,data,function,type)-3(参数形式value-type-json)_json数组_02

  • 进行解析遍历

AJAX - $.post(url,data,function,type)-3(参数形式value-type-json)_json数组_03

② 若使用objectMapper再次转换,则JSP页面不可以正常解析为JSON对象,不可正常遍历JSON数组对象,而是以字符串数组对象遍历!

  • 拿到返回数据

AJAX - $.post(url,data,function,type)-3(参数形式value-type-json)_json_04

  • 进行转换

AJAX - $.post(url,data,function,type)-3(参数形式value-type-json)_json_05

  • 遍历!【以字符数组的形式遍历了】

AJAX - $.post(url,data,function,type)-3(参数形式value-type-json)_post_06

题外话:

为什么不使用​​request.getParameterMap​​?

因为这里传输的为JSON数组字符串,没有​​username=yanshi02&password=123456​​ 的形式!不能拆解为 key :value !

如下所示为使用 request.getParameterMap

key :[{"name":"username","value":"yanshi02"},{"name":"password","value":"123456"}]
value:

如果不进行第二步转换,直接传参
​​​queryString = $('#editform').serializeArray();//JSON数组对象​​ 那么,返回来的是字符串拼接的形式:

jsonString...username=admin&password=123456
resultJson ..."username=admin&password=123456"

//...

out.println(resultJson);
//这里返回的是经过objectMapper转换后的resultJson
//如果返回jsonString,JSP可以拿到data,但是解析出错!
  • 提交数组对象到后台

AJAX - $.post(url,data,function,type)-3(参数形式value-type-json)_post_07

  • 拿到返回数据

AJAX - $.post(url,data,function,type)-3(参数形式value-type-json)_ajax_08

  • 尝试解析为JSON对象 【失败,仍旧为string】

AJAX - $.post(url,data,function,type)-3(参数形式value-type-json)_post_09

  • 遍历!【以字符数组遍历】

AJAX - $.post(url,data,function,type)-3(参数形式value-type-json)_ajax_10

JSP页面:

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

</form>
<input name="post" type="button" value="提交"/>
<div id="content"></div>
</body>

JSON解析:

$.post(url,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]);
}
}
}

总结 :

经过几篇各种形式的传参–后台解析–返回json,总结分析如下:

① 如果你后台的jsonString 现在为string 非object。那么不要再使用objectMapper进行转换!!!

② 如果你获得最终json是用objectMapper从其他数据,比如map,转换得到,那么这个json很可能为object,jsp页面可以直接使用data.key !


举报

相关推荐

0 条评论