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

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

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(); 
//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结构就改变了：

参考：https://www.cnblogs.com/eco-just/p/8490972.html

前后端交互&交互接口的更多相关文章

  1. 前后端API交互数据加密——AES与RSA混合加密完整实例

    前言 前段时间看到一篇文章讲如何保证API调用时数据的安全性(传送门:https://blog.csdn.net/ityouknow/article/details/80603617),文中讲到利用R ...

  2. 对GraphQL-BFF：微服务背景下的前后端数据交互方案的研究-------引用

    随着多终端.多平台.多业务形态.多技术选型等各方面的发展,前后端的数据交互,日益复杂. 同一份数据,可能以多种不同的形态和结构,在多种场景下被消费. 在理想情况下,这些复杂性可以全部由后端承担.前端只 ...

  3. SpringMVC前后端分离交互传参详细教程

    温故而知新,本文为一时兴起写出,如有错误还请指正 本文后台基于SpringBoot2.5.6编写,前端基于Vue2 + axios和微信小程序JS版分别编写进行联调测试,用于理解前后端分离式开发的交互 ...

  4. Vue在MVC中的进行前后端的交互

    Vue在MVC中的进行前后端的交互 Preface: 由于最近在研究前端相关的技术,作为前端非常优秀的框架Vue,个人在学习的过程中遇到一些问题,网上相关资料有限,所以在这这里总结一下个人使用Vue的 ...

  5. 两种方法实现asp.net方案的前后端数据交互（aspx文件、html+ashx+ajax）

    一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术 一.创建数据库 这里以 ...

  6. Vue在ASP.NET MVC中的进行前后端的交互

    Vue在ASP.NET MVC中的进行前后端的交互 Preface: 由于最近在研究前端相关的技术,作为前端非常优秀的框架Vue,个人在学习的过程中遇到一些问题,网上相关资料有限,所以在这这里总结一下 ...

  7. vue-resource的使用，前后端数据交互

    vue-resource的使用,前后端数据交互 1:导入vue与vue-resource的js js下载:   https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUg ...

  8. 前后端数据交互处理基于原生JS模板引擎开发

    json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...

  9. web前后端数据交互

    前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个li ...

  10. 前后端数据交互利器--Protobuf

    Protobuf 介绍 Protocol Buffers(又名 protobuf)是 Google 的语言中立.平台中立.可扩展的结构化数据序列化机制. https://github.com/prot ...

随机推荐

  1. InfoSYS-20170114

    1.描述Spring的事务机制 2.描述并发脏数据,如何避免 3.如何防止同一个请求重复提交(重复付款) 4.如何监控程序性能 5.CPU过高说明什么问题 通常是程序中有死循环, 参考 http:// ...

  2. 《代码敲不队》第八次团队作业：Alpha冲刺 第四天

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 代码敲不队 作业学习目标 掌握软件编码实现的工程要求. 团队项目github仓库地址链接 GitH ...

  3. AJAX发送POST请求，请求提交后Method从POST变成GET

    服务器如果返回301或者302状态码,所有请求方法都会切换成GET头部的location如果要保证重定向后的请求方法,需要在服务端返回307(临时)或者308(永久)状态码,这两个状态码不会更改原请求 ...

  4. L - 还是畅通工程

    L - 还是畅通工程   思路:水! #include<cstdio> #include<cstring> #include<iostream> #include& ...

  5. java 抽象类和接口的差别

     语法层面上: 1)抽象类能够提供成员方法的实现细节.而接口中仅仅能存在public abstract 方法. 2)抽象类中的成员变量能够是各种类型的.而接口中的成员变量仅仅能是public st ...

  6. 折腾开源WRT的AC无线路由之路-5

    -在Mac上设置无password连接SSH 1. 生成SSH密钥对 <pre name="code" class="html">ssh-keyge ...

  7. js 数组克隆

    在JS中,对于对象类型的变量的引用是通过类似C之类的"指针"的方式来操作的,及假设多个变量引用同一个对象,则随意一个变量对对象的操作都会影响到其他的变量. 这个可能不是非常明确,以 ...

  8. Struts2值栈的相关操作

    import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.ActionContext; import ...

  9. element-ui 实现table整列的拖动

    演示地址 1. 先动态渲染表头,给每一个表头添加一个class=virtual 的画虚线的类名,同时给每个表头加上鼠标点击.拖动.抬起事件:mousedown->mousemove->mo ...

  10. JS进阶 - 浏览器工作原理

    一.浏览器的结构 浏览器的主要组件为: 用户界面 - 包括地址栏.前进/后退按钮.书签菜单等.除了浏览器主窗口(显示页面),其他部分都属于用户界面. 浏览器引擎 - 在用户界面和渲染引擎之间传送指令. ...