Ajax获取后台Servlet数据
一、JSON
JSON是一种取代XML的数据结构,和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度。
JSON就是一串字符串 只不过元素会使用特定的符号标注。
{} 双括号表示对象
[] 中括号表示数组
"" 双引号内是属性或值
: 冒号表示后者是前者的值(key:value)
二.生成json数据,传值前端
servlet:
import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class MyServlet */ @WebServlet("/MyServlet") public class MyServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // TODO Auto-generated method stub req.setCharacterEncoding("utf-8"); String method = req.getParameter("method"); System.out.println(method); if(method.equals("getdataToTree")) { getdataToTree(req,resp); } } //返回数据 private void getdataToTree(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{ req.setCharacterEncoding("utf-8"); String str="[{\"age\":15,\"fullName\":\"John Doe\"},{\"age\":20,\"fullName\":\"Janette Doe\"}]"; //输出 PrintWriter out = resp.getWriter() ; out.write(str);//注意这里向jsp输出的流,在script中的截获方法 out.flush(); out.close(); } }
数据如下图:(生成了一个数组,里边有两个对象)
前端Ajax:
function getdata() { var names=[]; var nums=[]; $.ajax({ type : "get", async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行) url : "MyServlet?method=getdataToTree", //请求发送到Servlet dataType: "json", timeout : 10000, //超时10s success : function(res) { alert(res); //请求成功时执行该函数内容,res即为服务器返回的json对象 if (null != res && "" != res) { //console.log("getdata:"+res);
// for(var i=0;i<res.length;i++){ console.log("name:"+res[i].fullName); names.push(res[i].fullName); } for(var i=0;i<res.length;i++){ nums.push(res[i].age); } } }, error : function(errorMsg) { //请求失败时执行该函数 alert("数据请求失败!"); myChart.hideLoading(); } }); }
前端jsp注意引入jquery-x.x.x.min.js
<script src="js/jquery-3.3.1.min.js"></script>
Chrome浏览器查看:(右击网页,选择检查)
三.JSONObject、JSONArray区别
json,就是一个键对应一个值,超级简单的一对一关系。现在用到的json那可以层层嵌套啊,刚开始接触的时候,确实有种崩溃的赶脚,不想去理,取个数据还那么麻烦。其实,就跟if else语句一样,如果if中套if,if中再套if,写的规范了还行,要是代码格式不规范,那我们肯定也看着麻烦。所以啊,对于json嵌套,只要记住符号“:”前是键,符号后是值大括号成对找,一层层剥开,就清楚了。 举个例子说明,如下:
[{name1:{name2:{name3:'value1',name4:'value2'}}},{}]
从外到里看,例子中就是一个数组,数组里面是两个json格式的字符串。这样分析思路就清晰多了。
工作中需要取出name4的值,你们会怎么取呢?。最初我都想过字符串截取,那时还不了解JSONArray,现在知道了,取出来也就相当容易了。
取出name4值过程步骤:1,将以上字符串转换为JSONArray对象;2,取出对象的第一项,JSONObject对象;3,取出name1的值JSONObject对象;4,取出name2的值JSONObject对象;5,取出name4的值value2。
示例中json数组格式的字符串可以通过方法直接转换为JSONArray的格式:
JSONArray getJsonArray=JSONArray.fromObject(arrayStr);//将结果转换成JSONArray对象的形式 JSONObject getJsonObj = getJsonArray.getJSONObject(0);//获取json数组中的第一项 String result=getJsonObj.getJSONObject("name1").getJSONObject("name2").getJSONObject("name4");
好了我们说说这两个对象。
1,JSONObject
json对象,就是一个键对应一个值,使用的是大括号{ },如:{key:value}
2,JSONArray
json数组,使用中括号[ ],只不过数组里面的项也是json键值对格式的
Json对象中添加的是键值对,JSONArray中添加的是Json对象
JSONObject Json = new JSONObject(); JSONArray JsonArray = new JSONArray(); Json.put("key", "value");//JSONObject对象中添加键值对 JsonArray.add(Json);//将JSONObject对象添加到Json数组中
部分摘自https://blog.csdn.net/qq_32253371/article/details/78083391