前后端数据交互之数据接口

╰+攻爆jí腚メ 2022-03-02 12:44 531阅读 0赞

# [前后端数据交互之数据接口][Link 1] #

废话就不多说了，我们都知道，前端通常会通过后台提供的接口来获取数据来完成前端页面的渲染。

**1.前端通过接口调用后台返回的数据**

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

这是一个jsp页面：

向服务器发起了一个ajax请求，请求的地址是"servlet/JJJJ",请求成功后执行回调函数，这个data就是这个url

返回的数据，一般是一个json格式的字符串，它的根本还是一个字符串。所以前端拿到这个字符串之后，要

将它转化为json（数组）对象，然后访问这个对象的键/值，从而进行页面数据渲染。

**2.后台接口（servlet）**

![复制代码][copycode.gif]

//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();
        }

![复制代码][copycode.gif]

这是一个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][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字符串

![复制代码][copycode.gif]

//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字符串

![复制代码][copycode.gif]

**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请求**

![复制代码][copycode.gif]

![复制代码][copycode.gif]

前端向服务器发出ajax请求，并且在request中提供参数，这里有两个data，

第一个红色data是前端发起请求时附带的参数，

第二个金色data是后台返回的数据（json字符串）。

![复制代码][copycode.gif]

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();
        }

![复制代码][copycode.gif]

后台的这个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][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()方法：

![复制代码][copycode.gif]

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();
    
        }

![复制代码][copycode.gif]

注意看红字和紫字：

依次将三种形式的数据转为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

即查询全部字段

![复制代码][copycode.gif]

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);
            }

![复制代码][copycode.gif]

查询全部字段，查询结果的泛型自然为Student，可以通过getter方法获得个字段属性值，

然后传给新建对象，进而添加到集合listOut，响应出去。

②select sname,sex from Student

即：查询部分字段

![复制代码][copycode.gif]

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);
            }

![复制代码][copycode.gif]

遍历查询结果的每一项，由于该项是一个Object\[\]，获得数组每项的数据传递给javaBean对象的构造器参数，

然后将这个对象添加到自定义泛型的集合listOut中，再处理成json字符串响应给前端。

这里要注意两个集合的泛型！！！

③select sname from Student

即：查询单个字段

![复制代码][copycode.gif]

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);
            }

![复制代码][copycode.gif]

总而言之，数据库查询默认以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感觉没什么好讲得，直接上代码：

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

ajax请求成功的回调函数实现了，将数据填充到空的ul标签内。

通常情况下都是采用模板引擎，后台直接向前台输出html代码的json字符串，

然后前台直接写一个空的div，js代码也是大大简化：$("\#div").html(data),

如此一来，大大简化了前端工作量，经过渲染后展现给用户的html结构就改变了：

![1220416-20180303173627691-202734558.jpg][]

[原文链接：https://www.cnblogs.com/eco-just/p/8490972.html][Link 1]

[Link 1]: https://www.cnblogs.com/eco-just/p/8490972.html
[copycode.gif]: /images/20220302/09364b4395c34a2e96184cd0db8be192.png
[http_www.pc6.com_softview_SoftView_468549.html]: http://www.pc6.com/softview/SoftView_468549.html
[http_blog.csdn.net_gg12365gg_article_details_52347214]: http://blog.csdn.net/gg12365gg/article/details/52347214
[1220416-20180303173627691-202734558.jpg]: /images/20220302/b7671ee64c50490a9759beadf21b29d3.png