前后端数据交互之数据接口（转）

转自：https://www.cnblogs.com/eco-just/p/8490972.html

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

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字符串）返回给前端，再由前端渲染页面。

前后端数据交互之数据接口（转）

猜你喜欢