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