前后端数据交互之数据接口
廢話就不多說了，我們都知道，前端通常會通過后臺提供的接口來獲取數據來完成前端頁面的渲染。
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對象列表的形式返回。下面就是這之間的轉換操作。
這里采用json-lib工具包，下載地址：http://www.pc6.com/softview/SoftView_468549.html，6個包打包下載，請叫我雷鋒！！！
//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字符串）返回給前端，再由前端渲染頁面。
6.get/post請求的字符編碼問題
前端對服務器發起請求request、后臺做出響應response都會存在編碼不一致導致字符亂碼的問題
通常我們會在servlet的doGet()、doPost()方法開始添加一下語句：
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
但是，這種方法只對前臺發出的Post請求有效，對于Get請求是不起作用的。
對于Get請求，目前網上對策有三，詳情請戳右邊--->http://blog.csdn.net/gg12365gg/article/details/52347214。
個人推薦以下方式，一勞永逸：
< Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8" useBodyEncodingForURI="true" />
紅字是新加的字段，更改文件后要重啟Tomcat才能生效（注意：不是Myeclipse里面的服務器重啟按鈕）。
7.數據庫查詢的返回值問題
先來看一個doGet()方法：
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
String username = request.getParameter("username");
String sex = request.getParameter("sex");
session = HibernateSessionFactory.getSession();
transaction = session.beginTransaction();
String hql = "select sname,sex from Student where sex = ?";
Query query = session.createQuery(hql);
query.setString(0, sex);
List list = query.list();
Object[] a = list.toArray();
User user = new User("桔子桑", "男");
User user1 = new User("eco", "男");
User user2 = new User("官方", "男");
List b = new ArrayList();
b.add(user);
b.add(user1);
b.add(user2);
System.out.println("list類型：" + list.getClass().getName() +
" a類型："+ a.getClass().getName() +
" b類型："+ b.getClass().getName());
JSONArray array = JSONArray.fromObject(a);
String jsonstr = array.toString();
out.print(jsonstr);
out.flush();
out.close();
transaction.commit();
session.close();
}
注意看紅字和紫字：
依次將三種形式的數據轉為json字符串輸出到前臺：
list--ArrayList：[["桔子桑","男"],["eco","男"],["官方","男"]]
a-------Object：[["桔子桑","男"],["eco","男"],["官方","男"]]
b----ArrayList：[{"password":"男","username":"桔子桑"},{"password":"男","username":"eco"},{"password":"男","username":"官方"}]
再將他們轉為json對象后，獲得數據方式自然為以下（var obj = JSON.parse(data)）：
list、a：obj[0][0]--------------"桔子桑"；
b ：obj[0].username---"桔子桑"；
其余數據類推，得出結論：數據庫查詢返回的是類二維數組形式，實際上是Object[]的集合。
8.數據庫查詢返回值轉化
通常情況下，當然不可能讓前端按照obj[1][0]的方式去使用數據，那樣的話不利于代碼維護，所以我們就
有必要將數據庫查詢的返回值由Object[]的集合轉化為javaBean對象的集合。
綜合網上的前人的經驗，現針對幾種查詢貼出方法：
①from Student
即查詢全部字段
String hql = "from Student";
Query query = session.createQuery(hql);
List<Student> listDB = query.list();
List<Students> listOut = new ArrayList();
for (Student str : listDB) {
String sname = str.getSname();
String sex = str.getSex();
Integer sid = str.getSid();
Students stu = new Students(sid, sname, sex);
listOut.add(stu);
}
查詢全部字段，查詢結果的泛型自然為Student，可以通過getter方法獲得個字段屬性值，
然后傳給新建對象，進而添加到集合listOut，響應出去。
②select sname,sex from Student
即：查詢部分字段
String hql = "select sname,sex from Student";
Query query = session.createQuery(hql);
List<Object[]> listDB = query.list();
List<Student> listOut = new ArrayList();
for (Object[] object : listDB) {
String sname = (String) object[0];
Student stu = new Student(sname);
listOut.add(stu);
}
遍歷查詢結果的每一項，由于該項是一個Object[]，獲得數組每項的數據傳遞給javaBean對象的構造器參數，
然后將這個對象添加到自定義泛型的集合listOut中，再處理成json字符串響應給前端。
這里要注意兩個集合的泛型！！！
③select sname from Student
即：查詢單個字段
String hql = "select sname from Student";
Query query = session.createQuery(hql);
List<String> listDB = query.list();
List<Student> listOut = new ArrayList();
for (String str : listDB) {
String sname = str;
Student stu = new Student(sname);
listOut.add(stu);
}
總而言之，數據庫查詢默認以Object[]的集合形式返回，根據查詢的條目不同，
就可以用泛型來改變它的返回類型，然后拿出各項的數據通過構造函數來新建對象并添加到
自定義javaBean泛型的集合中去，最終轉化為json字符串響應出去。
數據庫查詢返回值：[{"vaule1","vaule2","vaule3"},{"vaule4","vaule5","vaule6"}]；
每個對象表示一條記錄，vaule表示每個查詢字段對應的數據值
經過轉化后：[{"attr1":"vaule1","attr2":"vaule2","attr3":"vaule3"},{"attr1":"vaule4","attr2":"vaule5","attr3":"vaule6"}]
這樣，輸出到前臺后就可以通過屬性attr來獲取對應的值了。
9.Js實現前端數據渲染
前端拿到javaBean對象集合形式的json字符串后，接下來就是將數據渲染到html標簽了。
js感覺沒什么好講得，直接上代碼：
<body>
this is my jsp<br>
<ul id="list"></ul>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
$.ajax({
type: "get",
url: "servlet/JJJJ",
data:{username:"eco",sex:"男"},
success:fill
});
function fill(data){
$("#list").html('');
var json = $.parseJSON( data );
$.each(json, function (index, item) {
var name = json[index].sname;
var idnumber = json[index].sid;
$("#list").html($("#list").html() + "<li>"+name + " - " + idnumber + "</li>"+"<br/>");
});
};
</script>
ajax請求成功的回調函數實現了，將數據填充到空的ul標簽內。
通常情況下都是采用模板引擎，后臺直接向前臺輸出html代碼的json字符串，
然后前臺直接寫一個空的div，js代碼也是大大簡化：$("#div").html(data),
如此一來，大大簡化了前端工作量，經過渲染后展現給用戶的html結構就改變了：
------------------------------------------------------------------------------------
總結
以上是生活随笔為你收集整理的前后端数据交互之数据接口的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 利用JSON将Map转换为类对象
- 下一篇： 丙肝能不能喝红糖姜水