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

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

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结构就改变了:

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

(0)

相关推荐