先後端數據交互之數據接口

時間  2020-09-14
標籤 後端 數據 交互 數據接口 简体版
原文   原文鏈接

廢話就很少說了，咱們都知道，前端一般會經過後臺提供的接口來獲取數據來完成前端頁面的渲染。javascript

1.前端經過接口調用後臺返回的數據css

<!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頁面：html

向服務器發起了一個ajax請求，請求的地址是"servlet/JJJJ",請求成功後執行回調函數，這個data就是這個url前端

返回的數據，通常是一個json格式的字符串，它的根本仍是一個字符串。因此前端拿到這個字符串以後，要java

將它轉化爲json（數組）對象，而後訪問這個對象的鍵/值，從而進行頁面數據渲染。jquery

2.後臺接口（servlet）ajax

//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

注意：紅字固定寫法，前面兩句是爲了防止輸出的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結構就改變了：

------------------------------------------------------------------------------------

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程