首页 web前端 js教程 前后端数据应该如何科学交互

前后端数据应该如何科学交互

Mar 09, 2018 am 11:40 AM
如何 科学

这次给大家带来前后端数据应该如何科学交互,前后端数据交互的注意事项有哪些,下面就是实战案例,一起来看一下。

HTML赋值

JS赋值

script填充JSON

AJAX获取JSON

WebSocket实时传输数据

总结

1. HTML赋值输出到 Element 的 value 或 data-name

1

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

登录后复制

渲染结果

1

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

登录后复制

使用 JS 获取$('input').val();

1

$('div').data('avatar');

登录后复制

优点:不占用全局变量,由 JS 自由获取。
使用建议:适合传递简单数据,也非常适合多个简单数据与 Element 绑定关系。

1

2

3

4

5

6

7

8

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

登录后复制

2. JS赋值
将数据填充到 <script> 的 JavaScript 变量声明中。

1

2

3

4

&lt;script&gt;

  var user_avatar = &quot;&lt;?php echo $user_avatar;?&gt;&quot;;

  // 渲染结果

  // var user_avatar = &quot;https://avatars1.githubusercontent.com/u/3949015?v=3&amp;s=40&quot;;&lt;/script&gt;

登录后复制

或使用 Smarty 后端模板引擎

1

2

&lt;script&gt;

  var user_avatar = &quot;{$user_avatar}&quot;;&lt;/script&gt;

登录后复制

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

为了传递一个字符串数据占用了全局变量 user_avatar,当有很多数据需要传输时则会占用很多全局变量。

如果返回数据存在换行将会导致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 方法。

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

1

2

&lt;script type=&quot;text/template&quot; id=&quot;data&quot;&gt;{&quot;username&quot;:&quot;nimojs&quot;,&quot;userid&quot;:1}&lt;/script&gt;&lt;script&gt;

  var data = JSON.parse($(&#39;#data&#39;).html());  //{username:&quot;nimojs&quot;,userid:1}&lt;/script&gt;

登录后复制

优点:页面加载完成后就可以获取到数据。不占用全局变量,可传递大量数据集合。
缺点:数据量特别大时会导致页面初次加载变慢。变慢并不只是文件大小导致的,也因为服务器查询数据并返回合集是需要时间,可使用AJAX获取JSON完成按需加载和加载等待。
使用建议:适合传递在DOM加载完成时就需要用到的大量数据集合。例如:前端控制页面渲染,后端将JSON数据源填充到 <script> 由前端使用 JavaScript模板引擎 进行页面渲染。如何选择Javascript模板引擎(javascript template engine)?

4. AJAX获取JSON使用 AJAX 获取JSON数据

1

2

3

4

5

6

7

8

9

10

11

12

&lt;span id=&quot;showdata&quot;&gt;查看资料&lt;/span&gt;

&lt;div style=&quot;display:none;&quot; id=&quot;box&quot;&gt;

  &lt;h2&gt;用户信息&lt;/h2&gt;

  &lt;p id=&quot;info&quot;&gt;![](loading.gif)&lt;/p&gt;

&lt;/div&gt;

$(&#39;#showdata&#39;).on(&#39;click&#39;,function(){

  $(&#39;#box&#39;).show();

  $.getJSON(&#39;/ajax/userdata/&#39;,function(oData){

    // oData = {&quot;username&quot;:&quot;nimojs&quot;,&quot;userid&quot;:1}

    $(&#39;#info&#39;).html(&#39;用户名:&#39; + oData.username + &#39;&lt;br&gt;用户ID:&#39; + oData.userid);

  })

})

登录后复制

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

页面上只显示查看资料

用户点击查看资料

显示用户信息和 loading 图片

向服务器发送获取用户信息的AJAX请求

服务器返回JSON字符串,$.getJSON 自动将返回的 JSON字符串转换为对象

填充内容到 <p id="info">

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

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

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

5. WebSocket实时传输数据如果将 AJAX请求和响应比喻成给服务器发短信和等待服务器回复短信,而 WebSocket 就如同和服务器打电话。
此处不对WebSocket做过多介绍,附上参考资料:

1

WebSocket**

登录后复制

使用 HTML5 WebSocket 构建实时 Web 应用**

1

Ajax vs WebSocket**

登录后复制

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

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

html的盒模型详解

bootstrap-validator使用详解

sublime怎样快速的创建html头部代码

以上是前后端数据应该如何科学交互的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

地理信息科学专业学生应选择哪种电脑 地理信息科学专业学生应选择哪种电脑 Jan 13, 2024 am 08:00 AM

地理信息科学专业学生应选择哪种电脑

新的「AI科学家」结合理论和数据来发现科学方程 新的「AI科学家」结合理论和数据来发现科学方程 May 18, 2023 am 10:49 AM

新的「AI科学家」结合理论和数据来发现科学方程

哈医大临床药学就业是否有前途(哈医大临床药学就业前景怎么样) 哈医大临床药学就业是否有前途(哈医大临床药学就业前景怎么样) Jan 02, 2024 pm 08:54 PM

哈医大临床药学就业是否有前途(哈医大临床药学就业前景怎么样)

「机器学习之父」Mitchell 撰文:AI 如何加速科学发展,美国如何抓住机遇 「机器学习之父」Mitchell 撰文:AI 如何加速科学发展,美国如何抓住机遇 Jul 29, 2024 pm 08:23 PM

「机器学习之父」Mitchell 撰文:AI 如何加速科学发展,美国如何抓住机遇

中国96位学者入选全球Top 1000计算机科学家,张磊成为大陆第一名 中国96位学者入选全球Top 1000计算机科学家,张磊成为大陆第一名 Apr 21, 2023 pm 06:58 PM

中国96位学者入选全球Top 1000计算机科学家,张磊成为大陆第一名

Win10系统如何重置 Win10系统如何重置 Jun 29, 2023 pm 03:14 PM

Win10系统如何重置

如何查看win11电脑配置 如何查看win11电脑配置 Jun 29, 2023 pm 12:15 PM

如何查看win11电脑配置

Science年度十大科学研究公布:韦伯望远镜当选,AIGC陪跑! Science年度十大科学研究公布:韦伯望远镜当选,AIGC陪跑! Apr 11, 2023 pm 03:37 PM

Science年度十大科学研究公布:韦伯望远镜当选,AIGC陪跑!

See all articles