实现前后端数据交互方法汇总


Posted in Javascript onApril 07, 2015

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

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 变量使用数据。

缺点:

为了传递一个字符串数据占用了全局变量 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 方法。

script填充JSON
什么是JSON?

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

<script type="text/template" 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 获取用户资料的示例。流程如下:

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

优点:

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

缺点:

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

使用建议:

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

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

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

Wiki:WebSocket
使用 HTML5 WebSocket 构建实时 Web 应用
Ajax vs WebSocket

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

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
基于Jquery的温度计动画效果
Jun 18 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 #Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 #Javascript
javascript实现画不相交的圆
Apr 07 #Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 #Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 #Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 #Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 #Javascript
You might like
在线短消息收发的程序,不用数据库
2006/10/09 PHP
PHP中的CMS的涵义
2007/03/11 PHP
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
python实现绘制树枝简单示例
2014/07/24 Python
Python批量按比例缩小图片脚本分享
2015/05/21 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
数据库的约束含义
2012/09/09 面试题
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
预备党员考察意见范文
2015/06/01 职场文书
Django REST framework 限流功能的使用
2021/06/24 Python