精华内容
下载资源
问答
  • 给大家介绍几种常用的前后端数据交互方法,并给出使用建议。以提高前后端协同开发的效率。非常的详细,推荐给小伙伴们,有需要的小伙伴可以参考下。
  • 主要介绍了vue.js前后端数据交互之提交数据操作,结合实例形式较为详细的分析了vue.js前后端数据交互相关的表单结构、约束规则、数据提交等相关操作技巧与注意事项,需要的朋友可以参考下
  • 本篇文章给大家分享了关于json前后端数据交互方法实现的相关知识点内容,有兴趣的读者们可以参考学习下。
  • 今天小编就为大家分享一篇vuejs前后端数据交互之从后端请求数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 前后端数据交互方法

    千次阅读 2018-06-15 16:05:37
    前后端数据交互方法 前端后端是如何交互的 spring mvc前后端数据交互(案例) 通过ajax调用HttpServlet来实现前后端数据交互 总结  前后端交互都有哪些内容 请求数据URL URL主要是由后台来写的,写好了给...

    前后端数据交互方法

    前端后端是如何交互的

    spring mvc前后端数据交互(案例)

    通过ajax调用HttpServlet来实现前后端数据交互

    springmvc 的json数据交互


    总结

    •  前后端交互都有哪些内容
      • 请求数据URL
        • URL主要是由后台来写的,写好了给前端开发者.
        • 如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数
      • 接口文档
        • 接口文档也是主要由后台开发者来写的
        • 前端只是接口文档的使用者,使用过程中,发现返回的数据不对,则需要跟后台进行商量,由后台来修改
        • 前端不要随意更改接口文档,除非在取得后台开发人员的同意的情况下
      • 交互的数据格式
        • 主要是JSON
      • 前端请求交互的方式
        • 对安全性不高 采用get方 post要比get安全
        • GET - 从指定的服务器中获取数据
        • POST - 提交数据给指定的服务器处理
      • 前端需要告知后端的主要信息
        • 先将要展示的页面内容进行模块划分,将模块的内容提取出来,以及方便前端的一些标志值等,将所有想要的内容和逻辑告知后端
        • 后端就会去数据库里面去查找相应的数据表中去获得相应的内容,或者图片地址信息。
        • URL中的参数主要是根据后台需要,如果后台需要一个参数作为查询的辅助条件 前端在URL数据请求时就传递参数。
    展开全文
  • 前后端分离——前后端数据交互

    万次阅读 2017-04-28 09:41:35
    在此介绍几种常用的前后端数据交互方法,并给出使用建议。以提高前后端协同开发的效率。 此文章适合前后端协同开发经验不足的新手阅读。 HTML赋值 输出到 Element 的 value 或 data-name input type=...
    在此介绍几种常用的前后端数据交互方法,并给出使用建议。以提高前后端协同开发的效率。
    

    此文章适合前后端协同开发经验不足的新手阅读。

    HTML赋值

    输出到 Element 的 value 或 data-name

    <input type="hidden" value="<?php echo $user_avatar;?>" />
    <div data-value="<?php echo $user_avatar;?>"></div>
    

    渲染结果

    <input type="hidden" value="https://avatars1.githubusercontent.com/u/3949015?v=3&s=40" />
    <div data-avatar="https://avatars1.githubusercontent.com/u/3949015?v=3&s=40"></div>
    

    使用 JS 获取

    $('input').val();
    // http://jquery.bootcss.com/jQuery.data/
    $('div').data('avatar');
    

    优点:
    不占用全局变量,由 JS 自由获取。

    使用建议:

    适合传递简单数据,也非常适合多个简单数据与 Element 绑定关系。

    <ul>
    <li>nimojs <span data-userid="1" >删除</span></li>
    <li>nimo22 <span data-userid="2" >删除</span></li>
    <li>nimo33 <span data-userid="3" >删除</span></li>
    <li>nimo44 <span data-userid="4" >删除</span></li>
    <li>nimo55 <span data-userid="5" >删除</span></li>
    </ul>
    <script>
    $('span').on('click',function(){
        $.post('/ajax/remove/',$(this).data('userid'),function(data){
            // ...
        })
    })
    </script>
    

    JS赋值

    将数据填充到 <script> 的 JavaScript 变量声明中。

    <script>
    var user_avatar = "<?php echo $user_avatar;?>";
    // 渲染结果
    // var user_avatar = "https://avatars1.githubusercontent.com/u/3949015?v=3&s=40";
    </script>
    

    或使用 Smarty 后端模板引擎:

    <script>
    var user_avatar = "{$user_avatar}";
    </script>

    优点:
    传递数据非常方便。前端直接调用 user_avatar 变量使用数据。

    缺点:

    1. 为了传递一个字符串数据占用了全局变量 user_avatar,当有很多数据需要传输时则会占用很多全局变量。
    2. 如果返回数据存在换行将会导致JS报错
    // 渲染结果有换行符
    var user_id = "
    
    https://avatars1.githubusercontent.com/u/3949015?v=3&s=40";
    // Uncaught SyntaxError: Unexpected token ILLEGAL
    

    优化:
    可以通过指向的某一个变量存放所有后端返回的内容,最小程度占用全局变量。例:

    // PHP 代码
    var SERVER_DATA = {
        username: {$username},
        userid: {$userid},
        title: {$title}
    }
    // 渲染结果
    var SERVER_DATA = {
        username: "NimoChu",
        userid: 1,
        title: 'F2E'
    }
    

    使用建议:
    需要最快速度传递数据给 JS 并十分确定此数据稳定时,使用此方式。数据格式复杂的建议使用script填充JSON 或AJAX获取JSON 方法。

    script填充JSON

    什么是JSON?

    填充 JSON 数据到 <script> 标签中,前端通过 DOM 获取 JSON字符串并解析成对象。

    <!-- PHP 代码 -->
    <script type="text/json" id="data"><?php echo json_encode($data) ?></script>
    <!-- 页面渲染结果 -->
    <script type="text/json" id="data">{"username":"nimojs","userid":1}</script>
    <script>
    var data = JSON.parse($('#data').html());
    //{username:"nimojs",userid:1}
    </script>

    优点:
    页面加载完成后就可以获取到数据。不占用全局变量,可传递大量数据集合。

    缺点:
    数据量特别大时会导致页面初次加载变慢。变慢并不只是文件大小导致的,也因为服务器查询数据并返回合集是需要时间,可使用AJAX获取JSON完成按需加载和加载等待。

    使用建议:
    适合传递在DOM加载完成时就需要用到的大量数据集合。例如:前端控制页面渲染,后端将JSON数据源填充到 <script> 由前端使用 JavaScript模板引擎进行页面渲染。

    AJAX获取JSON

    使用 AJAX 获取JSON数据

    <span id="showdata">查看资料</span>
    <div style="display:none;" id="box">
        <h2>用户信息</h2>
        <p id="info"><img src="loading.gif" /></p>
    </div>
    $('#showdata').on('click',function(){
        $('#box').show();
        $.getJSON('/ajax/userdata/',function(oData){
            // oData = {"username":"nimojs","userid":1}
            $('#info').html('用户名:' + oData.username + '<br>用户ID:' + oData.userid);
        })
    })

    这是一个通过AJAX 获取用户资料的示例。流程如下:

    1. 页面上只显示查看资料
    2. 用户点击查看资料
    3. 显示用户信息和 loading 图片
    4. 向服务器发送获取用户信息的AJAX请求
    5. 服务器返回JSON字符串,$.getJSON 自动将返回的 JSON字符串转换为对象
    6. 填充内容到 <p id="info">

    优点:
    不占用全局变量和 DOM 节点,可以自由控制获取数据的触发条件(页面加载完成时、用户点击查看资料时或用户点击某个按钮时)。当开始获取数据时可使用 loading 图片占位提示用户数据正在读取。防止页面加载所有数据导致的页面加载缓慢。

    缺点:
    会产生额外的HTTP请求。不能在DOM加载完成以后立即获取,需要发送请求-接收响应。

    使用建议:
    适合加载非主要信息、设定触发条件(用户点击查看资料时),并提供友好的数据读取等待提示。

    WebSocket实时传输数据

    如果将 AJAX请求和响应比喻成给服务器发短信和等待服务器回复短信,而 WebSocket 就如同和服务器打电话。

    此处不对WebSocket做过多介绍,附上参考资料:

    1. Wiki:WebSocket
    2. 使用 HTML5 WebSocket 构建实时 Web 应用
    3. Ajax vs WebSocket

    总结

    每种情况都有每种情况的用处,没有绝对正确的方法。根据实际情况灵活的选择获取数据方式


    展开全文
  • API-Standard 前后端数据交互规范
  • 超详细总结:前后端数据交互原理

    千次阅读 多人点赞 2020-08-14 17:40:08
    最近开始接触前后端的一些知识,查了很多资料,今天把互联网产品的前后端数据交互做个总结留做笔记。 互联网产品的前后端数据交互是通过一个通讯协议完成。前后台交互的协议主要包括HTTP,FTP,SMTP,TELNET,POP3…本文...

    最近开始接触前后端的一些知识,查了很多资料,今天把互联网产品的前后端数据交互做个总结留做笔记。

    互联网产品的前后端数据交互是通过一个通讯协议完成。前后台交互的协议主要包括HTTP,FTP,SMTP,TELNET,POP3…本文仅总结HTTP协议。

    HTTP协议
    HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送协议,是一个基于TCP/IP通信协议来传递数据,也是互联网上应用最为广泛的一种网络协议。

    HTTP的主要特点

    • 简单快速:客户向服务器请求服务时,只需传送请求方法和路径。由于HTTP协议简单,使得HTTP服务器的程序规模小,因而通信速度很快;
    • 灵活:HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记;
    • 无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间;
    • 无状态:HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快;
    • 支持B/S及C/S模式

    无连接、无状态的理解:
    TCP协议对应于传输层,而HTTP协议对应于应用层,从本质上来说,二者没有可比性。

    Http协议是建立在TCP协议基础之上的,当浏览器需要从服务器获取网页数据的时候,会发出一次Http请求。Http会通过TCP建立起一个到服务器的连接通道,当本次请求的数据完毕后,Http会立即将TCP连接断开,这个过程是很短的。所以Http连接是一种短连接,是一种无状态的连接。所谓的无状态,是指浏览器每次向服务器发起请求的时候,不是通过一个连接,而是每次都建立一个新的连接。如果是一个连接的话,服务器进程中就能保持住这个连接并且在内存中记住一些信息状态。而每次请求结束后,连接就关闭,相关的内容就释放了,所以记不住任何状态,成为无状态连接。

    接口
    在互联网领域里面,这个词在不同场景下都会出现 ,经常听到工程师说“ 让后台给我提供一个接口,我直接调用这个接口 ”,“ 这里你设计一个接口,我来实现 ”,大体上来讲,接口一般指的是HTTP接口,也可以说是HTTP API,接口由后端提供,前端调用后端接口以获取后端数据。而且接口由URL和HTTP方法构成,URL为接口的地址,HTTP方法指的是GET, PUT, DELETE等等。

    具体来讲接口就是提供具体能力的一个标准和抽象,是一些预先定义的函数,包括接口地址、传入参数和返回参数和数据。可以简单理解为,当需要访问某些数据,正常状态下传入合格参数,会收到该数据范围内的返回参数。前后台的交互基本都是通过程序接口实现的。

    总结:
    数据交互的过程可简单理解为,前台想要获得某些数据,将传入参数通过URL接口地址,传递给服务器,服务器根据传入的参数了解到前台要获得什么数据,去数据库查询获取数据,然后将所需数据返回给前台,前台拿到数据做相应的页面展示。
    在这里插入图片描述
    案例

    网上用户上传图片作为头像这个需求需要后台人员处理,当用户登录修改自己个人信息的时候,上传了头像。此时,后台处理该用户update个人信息,将该图片存入数据库,一般存的都是图片地址,string形式的数据。然后,要返回到前台的时候,后台人员需要对这些用户的个人信息进行处理,不只是头像,还有一些别的信息。后台通过语言编译,生成json格式的键值对(一般是json 还有xml txt 等数据格式)。生成一个地址也就是url,前台人员利用ajax,将返回的data显示到页面就好了。

    那么有几个问题,
    1、前端请求数据URL由谁来写?
    在开发中,URL主要是由后台来写的,写好了给前端开发者.如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数,这里的查询参数也就是URL请求的参数。

    2.接口文档主要由谁来写?
    接口文档也是主要由后台开发者来写的,因为直接跟数据打交道的就是后台,后台是最清楚,数据库里面有什么数据,能返回什么数据.前端开发只是数据的被动接受者.所以接口文档也主要是由后台来完成的,前端只是接口文档的使用者,使用过程中,发现返回的数据不对,则需要跟后台进行商量,由后台来修改.切记 前端不要随意更改接口文档,除非在取得后台开发人员的同意的情况下.总的来讲,接口文档主要由后台来设计,修改,前端开发者起到了辅助的作用。

    3.前端开发与后台交互的数据格式主要是什么?
    前后端交互时传递数据的格式,主要是JSON格式的,当然也有XML格式,但现在用的不多。

    JSON
    JSON(JavaScript Object Notation,) 是一种轻量级的数据交换格式,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

    JSON数据格式很好理解,举个例子:

    {
    “姓名”:”流年”
    “性别”:”男”
    “兴趣爱好”:”听音乐”
    }
    这就是 JSON键/值对。

    实例解析1

    在这里插入图片描述
    这是一个APP的页面,前端会把它分为3个部分去分别请求数据,即:

    banner部分
    课程种类部分
    热门好课部分

    (1)banner部分
    前台需要今天产品的最新图片地址。URL中的参数主要是根据后台需要,如果后台需要前端传递一个时间戳才能够查询到具体的图片信息,那么前端在数据请求时请求参数就应该包含时间的参数,代码如下:

    前台部分:
    #前端得到的URL
    URL:http://www.heiheihei.com/GetPicture.php
    #需要传递给后端带参数的URL
    或者http://www.heiheihei.com/GetPicture.php?time=”2017-11-23 00:00:00″

    代码解析:
    http: #协议头,跟后台交互需要基于HTTP协议。
    heiheihei.com #域名也叫主机名(heiheihei是乱起的)。
    /GetPicture.php #路径,也就是能给前台数据的路径。
    ?time=”2017-11-23 00:00:00″ #参数,带着这个参数给服务器,服务器就会把2017年11月23日零时0分0秒的banner查询到并且返给前端。

    后端部分:

    select “轮播图片” from picture where time =2017-11-23 00:00:00

    代码解析:
    数据库查询语句,去数据库里面去查找相应的数据表,查询条件就是前端传递过来的URL参数time。

    (2)课程种类部分
    此部分包含两部分内容,即图片和标题。这些内容在后台数据库表中,后台只需要设计个URL给前端,让前端直接发访问就可以了:

    URL:http://www.heiheihei.com/LessonType.php

    (3)热门好课部分
    此部分也是包含图片和标题。前端把这些信息告知后台,后台看到这些信息后,会去相对应的数据库去查询,如果这些数据后台很容易获取到,会直接给个URL给前端。否则就需要前端通过URL来传递一些参数。比如:

    #前端得到的URL
    URL:http://www.heiheihei.com/goodLesson.php
    #需要传递给后端带参数的URL
    或者http://www.heiheihei.com/goodLesson.php?time=”2017-11-23 00:00:00&clases=””

    前端应该告知后台哪些有效信息,后台才能返回前端想的数据的呢?总结来说:

    先将要展示的页面内容进行模块划分,将模块的内容提取出来,以及方便前端的一些标志值等,将所有想要的内容和逻辑告知后端,后端就会去数据库里面去查找相应的数据表中去获得相应的内容,或者图片地址信息。

    URL中的参数主要是根据后台需要,如果后台需要一个参数作为查询的辅助条件,前端在URL数据请求时就传递参数。参数前面加上?,如果有多个参数,参数中间&

    所有前端请求的URL后面的参数,都是辅助后台数据查询的。如果不需要参数,那么后台就会直接给个URL给前端。

    实例解析2
    在这里插入图片描述
    这是一个网站的登录功能,我们通过ajax(可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页)加载服务器数据的过程再来体验一下前后台数据交互的过程。

    我们先给登录名和登录密码的文本框起两个名字,即UserName,PassWord。

    前端代码(解析)如下:

    $.ajax({
    ‘url’:’login.php’, #和之前的URL一样,前端把参数传递到什么位置
    ‘data’:{“username”:$(‘#UserName’).val(),”PassWord”:$(‘#password’).val(),}, #前端传递给后端的数据(用户名和密码)
    ‘success’:function(data){
    } #服务器返回数据成功的时候,前端需要如何操作(data中存的就是服务器返回的数据)
    ‘type’:’post’ #数据传输的方法
    ‘dataType’:’json’ #传递数据的类型,JSON
    };
    

    我们不用关心function(data)函数中具体的代码,无非就是:前端页面展示用户的用户名、页面状态变为已登录、展示用户相关数据等。

    后端代码过于复杂,就不展示了,总之后端要做的处理就是:拿到前端传递过来的数据(用户名和密码)和数据库中用户信息做比对,如果一致则返回给前台一个状态,并且返回用户的相关数据(昵称、个人信息、购物车信息、收藏的商品等等),这些数据同样是以JSON的形式传回给前端。如果用户名或密码不一致,也返回给前端一个状态。前端根据得到的状态做出页面的相应效果:登录按钮变为退出、显示用户昵称、显示购物车信息、显示收藏信息、登录框隐藏等,如果用户名密码不匹配则显示相应的提示信息。

    以上就是网站通过ajax技术完成的前后端数据交互过程。

    最后,关于接口设计的建议。
    虽然很多时候一个api接口的业务,数据逻辑是后端提供的,但真正使用这个接口的是客户端,一个前端功能的实现流程与逻辑,有时候只有客户端的RD才清楚,从某种意义来说,客户端算是接口的需求方。

    所以在前期接口设计和评审时,客户端的RD应该更多的思考和参与,什么时机调什么接口?每个接口需要哪些字段?数据含义怎么给?只有这些都考虑清楚,且达成一致并产出接口文档后,当项目真正启动时,根据接口协议进行开发,才能尽量避免各种不确定因素对项目整体进度的影响。

    参考文献:
    浅谈前后端数据交互方式
    Web通信协议:OSI、TCP、UDP、Socket、HTTP、HTTPS、TLS、SSL、WebSocket、Stomp
    前后端交互原理 深入理解

    展开全文
  • 前后端数据交互之数据接口

    万次阅读 2019-03-20 15:31:44
    前后端数据交互之数据接口 废话就不多说了,我们都知道,前端通常会通过后台提供的接口来获取数据来完成前端页面的渲染。 1.前端通过接口调用后台返回的数据 <!DOCTYPE ...

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

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

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

    原文链接:https://www.cnblogs.com/eco-just/p/8490972.html

     

     

    展开全文
  • Ajax实现django前后端数据交互

    千次阅读 2019-08-09 10:41:41
    Ajax实现前后端数据交互 前提: ​ 熟悉django ​ 了解HTML ​ 了解JQ基础语法 Ajax是什么? ​ Ajax 即Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。 ...
  • 在实际开发过程中,前端页面通常需要根据后台数据实现动态生成和实时更新,因此如何实现前后端数据交互成了开发过程中的难题。 现将使用ajax技术解决前后端数据的交互: (1)ajax技术介绍: ajax一个前后台配合的...
  • Servelt里面的setContentType: response.setContentType(...当setContentType里属性为application/json时,前后端数据交互时,数据格式为json对象或者json对象数组; response.setContentType("text/html;ch...
  • Ant Design Pro 前后端数据交互(前台调接口) Ant Design Pro 是一套基于 React 技术栈的单页面应用,我们提供的是前端代码和本地模拟数据的开发模式, 通过 Restful API 的形式和任何技术栈的服务端应用一起工作。...
  • 前后端数据交互方法总结

    千次阅读 2018-08-24 11:16:11
    在此总结几种常用的前后端数据交互方法,并给出使用建议。目录: HTML赋值 JS赋值 script填充JSON AJAX获取JSON WebSocket实时传输数据 总结 HTML赋值 输出到 Element 的 value 或 data-name &lt;input ...
  • 最简单的前后端数据交互

    千次阅读 2020-02-23 10:48:57
    最简单的前后端数据交互 1 前言 本人断断续续地接触Web前后端已有一年多了,但是一直停留在表面,只知其一,不知其二。这个周末马上就要过去了,但是这两天啥都没做,想到这里,强烈的负罪感冲上心头,于是从床上跳...
  • springmvc前后端数据交互总结

    千次阅读 2017-06-28 17:26:44
    Spring MVC前后端数据交互总结 控制器 作为控制器,大体的作用是作为V端的数据接收并且交给M层去处理,然后负责管理V的跳转。SpringMVC的作用不外乎就是如此,主要分为:接收表单或者请求的值,定义过滤器...
  • 前后端数据交互的方式有哪些? 常用的有哪些? 一、传统的ajax(原生ajax) 应首先创建 XMLHttpRequest对象 这个对象包含的属性如下: 1.readyState:对象的状态: 0:未初始化 1:open方法成功调用send方法未调用 ...
  • SSM框架项目一一前后端数据交互

    千次阅读 2019-07-06 15:24:21
    SSM框架项目一一实现前后端数据交互学习笔记 记录下练手项目的数据交互实现,由于对前端不是很熟悉,所以搞了很久终于搞懂了一点,所以记录下,以便又忘记了。 实现的功能是:查询登录的用户信息功能 因为是两...
  • Ajax+Servlet实现简单前后端数据交互

    千次阅读 2018-10-11 20:31:39
    前后端数据交互 今天我们来了解一下简单的前后端数据交互。 首先又java编辑器,tomcat服务器环境。 新建一个jave ee网站项目。给项目起好名字一直next最后选中web-xml选项,配置xml文件。如图 然后在你的新建...
  • 前后端数据交互的基本格式

    千次阅读 2018-12-12 14:52:29
    前后端数据交互的基本格式 一、 前端到后端 jquery语法 &lt;srcpt&gt; var data = { "data": { "这是传给后台的参数名": "这是要传给后台的参数值", "name&...
  • 利用Vue,fetch实现前后端数据交互 利用fetch实现数据的交互,简单练习的小实例。 目录结构 index.html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name=...
  • 此代码为beego框架实现的jQuery ajax省市二级联动,前后端交互为json数据。 此代码为beego框架实现的jQuery ajax省市二级联动,前后端交互为json数据。 此代码为beego框架实现的jQuery ajax省市二级联动,前后端交互...
  • 现在大多数互联网项目都是采用前后端分离的方式开发,前端人员负责页面展示和数据获取,后端负责业务逻辑处理和接口封装。当与前端交互的过程当中,常用json数据与前端进行交互,这样想取出前端传送过来的json数据的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 62,770
精华内容 25,108
关键字:

前后端数据交互