上一篇的讲解传到后台的参数形式为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】
- 将字符串数组对象解析为JSON数组对象【解析为json object】
- 正常遍历JSON数组对象!
② 若进行转换,返回out.println(resultJson)
,则不能正常解析为JSON数组对象进行遍历:
- 拿到返回的data,type为string
- 尝试进行JSON解析【失败,还是string】
- 按照string字符串数组进行遍历!
Tips:
该文使用的是jackjson进行操作。无论前端页面或者后台,在接收或者解析json的时候注意 typeof json,究竟是字符串还是json object 或者是json 数组对象!