前後端資料互動之資料介面（轉）
廢話就不多說了，我們都知道，前端通常會通過後臺提供的介面來獲取資料來完成前端頁面的渲染。
1.前端通過介面呼叫後臺返回的資料
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>test 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"> </head> <body> this is my jsp <br> <div id="json"></div> </body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script type="text/javascript"> $.ajax({ type: "Get", url: "servlet/JJJJ", success: function(data){ $("#json").text(data); } }) </script> </html>
這是一個jsp頁面：
向伺服器發起了一個ajax請求，請求的地址是"servlet/JJJJ",請求成功後執行回撥函式，這個data就是這個url
返回的資料，一般是一個json格式的字串，它的根本還是一個字串。所以前端拿到這個字串之後，要
將它轉化為json（陣列）物件，然後訪問這個物件的鍵/值，從而進行頁面資料渲染。
2.後臺介面（servlet）
//JJJJ.java public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); response.setHeader("contentType", "text/html; charset=utf-8"); PrintWriter out = response.getWriter(); String jsonstr = "[{\"name\": \"eco\", \"age\": \"21\"}]"; out.print(jsonstr); out.flush(); out.close(); }
這是一個servlet，定義了一個json格式的字串jsonstr，前端對這個servlet發起http請求後，它就返回給前端一
個json字串。這個手寫的json字串，注意了裡面的冒號要用轉義字元“\”。
注意：紅字固定寫法，前面兩句是為了防止輸出的json字串中文亂碼。
3.後臺servlet內資料轉換
前後端資料互動一般資料有兩個格式：json、xml；大多數情況下還是json。
所以後臺獲取的資料最終都要以json字串的形式響應給前臺。而後臺從資料庫獲取資料，一般會以java物件或
者java物件列表的形式返回。下面就是這之間的轉換操作。
//java物件轉化為json字串 User user = new User("eco", "567568"); //java物件 JSONObject json = JSONObject.fromObject(user); //轉為json物件 String jsonstr = json.toString(); //轉為json字串
//java物件列表轉化為json字串
User user1 = new User("eco", "567568");
User user2 = new User("桔子桑", "123123");
List list = new ArrayList(); //陣列列表，並新增兩個user物件
list.add(user1);
list.add(user2);
JSONArray array = JSONArray.fromObject(list); //java物件列表轉化為json物件陣列
String jsonstr = array.toString(); //json物件陣列轉化為json字串4.前端資料轉換
前端通過後臺提供的介面獲得了json字串，接下來就是將其轉化為json物件（列表），然後再對其屬性進行操作。
//json字串轉化為json物件
var a = JSON.parse( data ); //瀏覽器支援的方式
var b = $.parseJSON( data ); //jQuery支援的方式上面是兩種將json字串轉化為json物件的方式，jQuery方式需要事先匯入jQuery框架。
下面是json物件的資料訪問方式。
a.username; //a是一個json物件，返回物件的username屬性值
a[1].username; //a是一個json物件陣列，返回第二個物件的username屬性值5.前端發起含引數的ajax請求
<script type="text/javascript">
$.ajax({
type: "Get",
url: "servlet/JJJJ",
data:{username:"eco",password:"23423"},
success: function(data){
var a = JSON.parse(data);
$("#json").text(a.username);
}
})
</script>前端向伺服器發出ajax請求，並且在request中提供引數，這裡有兩個data，
第一個紅色data是前端發起請求時附帶的引數，
第二個金色data是後臺返回的資料（json字串）。
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setHeader("contentType", "text/html; charset=utf-8");
PrintWriter out = response.getWriter();
String username = request.getParameter("username");
String password = request.getParameter("password");
User user = new User(username, password);
JSONObject json = JSONObject.fromObject(user);
String jsonstr = json.toString();
out.print(jsonstr);
out.flush();
out.close();
}後臺的這個servlet收到前端的請求後，先獲取request裡面的Parameter，然後將屬性值賦給User物件，
java物件---->json物件---->json字串，最後將json字串返回給前端。
後面的就不用我說了。
更多的時候，我們並不是像上面寫的那樣，通常我們會將前臺request傳來的引數作為資料庫查詢的條件，
將查詢結果（java物件列表）經過處理（轉為json字串）返回給前端，再由前端渲染頁面。