个人笔记，不喜欢勿评论
今天学习了一下如何使用ajax传递json数据到后台
1、首先需要导入几个json的jar包；
2、开始写代码
前端代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript">
function add() {
/**
当给个错误的url的时候，就会走到error方法里面，
该ajax请求会返回一个status code码，当返回值为200时，表示成功，执行success方法，否则执行error方法；
*/
/* $.ajax({
cache: true,
type: "POST",
url:"/Ajax/TestServlet",
data:$('#form1').serialize(),// 你的formid
async: false,
error: function(request) {
alert("提交失败");
},
success: function(data) {
/* $("#commonLayout_appcreshi").parent().html(data);*/
/* alert(data);
$("#div1").text(data);
}
}); */
/**
采用json的方式进行数据传递
*/
var jsonvalue = {
"name" : "丫丫",
"id" : 1,
"password" : 123456
};
var jsonshuzu = {
"name" : [ {
"age" : 25,
"height" : 160,
"weight" : 100,
"email" : "1946898935"
}, {
"age" : 26,
"height" : 178,
"weight" : 140,
"email" : "1234567"
} ],
"address" : [ {
"addressname" : "福州市"
}, {
"addressname" : "厦门市"
} ]
};
alert("走到了add方法里面");
/**
dataType : "json":的意思是从后台返回的值必须为json格式，否则将执行error方法
*/
$.ajax({
cache : true,
type : "post",
url : "/Ajax/TestServlet",
data : {
"ss" : JSON.stringify(jsonshuzu)
},
async: false,
error : function(request) {
alert("提交失败");
},
success : function(data) {
alert("data:" + data);
$("#div1").text(data);
}
});
}
</script>
</head>
<body>
<form id="form1">
<!-- 用户名：<input type="text" id="input1" name="username" id="yonghu"></input><br />
密码：<input type="password" name="password" id="mima"></input><br /> -->
<input
type="button" name="提交" value="提交" onclick="add()"></input>
<div id="div1"></div>
</form>
</body>
</html>
后台接受的代码：
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
System.out.println("到了dopost方法中----------------------------");
PrintWriter out = response.getWriter();
/**
* 采用request.getParameter("username");获取从页面传来的值时，括号中的参数为页面中name的值
*/
/*String username=request.getParameter("username");
String passwrd=request.getParameter("password");
System.out.println(username+"/"+passwrd);
out.print(username+"/"+passwrd);*/
/**
* 接受从前端传递过来的json数据,要注意引入解析json的包
*/
String name=request.getParameter("ss");
JSONObject json=JSONObject.fromObject(name);
Iterator iter = json.keySet().iterator();
Map<String,String> map = new HashMap<String,String>();
/**
* 解析来自前端页面的值，解析json数组
*/
while (iter.hasNext()) {
String key = (String) iter.next();
String value = json.getString(key);
System.out.println("key:"+key+",value:"+value);
map.put(key, value);
}
String value=map.get("name");
JSONArray jsonArray =JSONArray.fromObject(value);
System.out.println("长度为："+jsonArray.size());
for (int i = 0; i <jsonArray.size(); i++) {
int age=(Integer) jsonArray.getJSONObject(i).get("age");
int height= (Integer) jsonArray.getJSONObject(i).get("height");
int weight= (Integer) jsonArray.getJSONObject(i).get("weight");
String email=(String) jsonArray.getJSONObject(i).get("email");
System.out.println("获取到的值为："+age+","+height+","+weight+","+email);
}
String values=map.get("address");
JSONArray jsonArray2=JSONArray.fromObject(values);
for (int i = 0; i <jsonArray2.size(); i++) {
String city=(String) jsonArray2.getJSONObject(i).get("addressname");
System.out.println("获取到的城市名为："+city);
}
/**
* 前端页面设置了dataType为json格式，则后台返回时返回的格式必须为json格式
*/
out.print("提交成功");
out.flush();
out.close();
注意事项：
1、前端需注意的是①json数据的写法②ajax传递时，若定义datatype:"json",则表示后台返回的值必须为json格式才可以
2、后台需注意json数组的解析方式