本文介绍了几种常用的前端和后端数据交互方法，并给出了一些建议。从而提高前端协同开发的效率。很详细，推荐给朋友，有需要的朋友可以参考一下。
本文适合前端协同开发经验不足的新手。
HTML赋值
将值或数据名称输出到元素。
输入类型=隐藏值=？php echo $ user _ avatar?/
div数据-值=？php echo $ user _ avatar?/div
渲染结果
input type= hidden value= https://avatar S1 . githubusercontent . com/u/3949015？v=3s=40 /
div data-avatar= https://avatar S1 . githubusercontent . com/u/3949015？v=3s=40/div
使用 JS 获取
$(输入)。val()；
//http://jquery.bootcss.com/jQuery.data/
$(div )。数据(头像)；
优势：
不占用全局变量，由JS自由获取。
使用建议：
适合传递简单数据，也非常适合多个简单数据和元素之间的绑定关系。
保险商实验所
IMO js span data-userid= 1 delete/span/Li
Li nimo 22 span data-userid= 2 delete/span/Li
Li nimo 33 span data-userid= 3 delete/span/Li
Li nimo 44 span data-userid= 4 delete/span/Li
Li nimo 55 span data-userid= 5 delete/span/Li
/ul
脚本
$(span )。on(click ，function(){
$.post(/ajax/remove/，$(this)。数据( userid )，函数(数据){
//.
})
})
/脚本
JS分配
将数据填充到脚本的JavaScript变量声明中。
脚本
var user_avatar=？php echo $ user _ avatar?；
//呈现结果
//var user _ avatar= https://avatar S1 . githubusercontent . com/u/3949015？v=3s=40’；
/脚本
或者使用Smarty后端模板引擎：
脚本
var user _ avatar= { $ user _ avatar } ；
/脚本
优势：
数据传输非常方便。前端直接调用user_avatar变量来使用数据。
缺点：
全局变量user_avatar用于传递一串数据，当有大量数据需要传递时，会用到很多全局变量。
如果返回的数据中有换行符，JS将报告一个错误。
//渲染结果有换行符
var user _ id= https://avatar S1 . githubusercontent . com/u/3949015？v=3s=40’；
//未捕获的语法错误：意外的标记非法
优化：
你可以通过指向某个变量来存储后端返回的所有内容，把全局变量占用到最小。示例：
//PHP代码
var SERVER_DATA={
用户名：{ $用户名}，
用户标识：{ $用户标识}，
标题：{$title}
}
//呈现结果
var SERVER_DATA={
用户名：“尼莫楚”，
userid: 1，
标题：“F2E”
}
使用建议：
当您需要尽可能快地将数据传输到JS，并且您确信这些数据是稳定的时，请使用此方法。如果数据格式复杂，建议使用脚本填充JSON或者AJAX获取JSON方法。
script填充JSON
JSON是什么？
将JSON数据填充到script标签中，前端通过DOM获取JSON字符串并解析成对象。
script type= text/template id= data { username : nimo js ， userid:1}/script
脚本
var data=JSON.parse($(#data )。html())；
//{用户名： nimojs ，用户id:1}
/脚本
优势：
数据可以在页面加载后获取。它不占用全局变量，可以传输大量数据集。
缺点：
当数据量非常大时，页面的初始加载会很慢。速度变慢不仅是由文件大小造成的，还因为服务器查询数据和返回集合需要时间。可以使用AJAX让JSON完成按需加载和加载等待。
使用建议：
它适合于在加载DOM时传输大量需要的数据集。比如前端控制页面渲染，后端将JSON数据源填充到脚本中，前端使用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/)，函数(oData){
//oData={username:nimojs ， userid:1}
$(#info )。html(用户名： oData.username br用户ID: odata . userid)；
})
})
这是一个通过AJAX获取用户信息的例子。流程如下：
页面上只显示查看数据。
用户点击查看数据。
显示用户信息和加载图片
向服务器发送获取用户信息的AJAX请求
服务器返回一个JSON字符串和$。getJSON自动将返回的JSON字符串转换成对象。
将内容填充到p id=info
优势：
不占用全局变量和DOM节点，可以自由控制获取数据的触发条件(页面加载时、用户点击查看数据时或用户点击按钮时)。当您开始获取数据时，您可以使用加载图像占位符来提醒用户正在读取数据。防止由于页面上加载了所有数据而导致页面加载缓慢。
缺点：
将生成额外的HTTP请求。你不能在DOM加载后立即得到它。您需要发送请求并接收响应。
使用建议：
加载非主信息，设置触发条件(用户点击查看数据时)，提供友好的数据读取等待提示。
WebSocket实时传输数据
如果把AJAX的请求和响应比作向服务器发送短消息，等待服务器回复短消息，那么WebSocket就好比调用服务器。
这里不太介绍WebSocket，附上参考资料：
维基：WebSocket
利用HTML5 WebSocket构建实时Web应用
Ajax vs WebSocket
总结
每种情况都有它的用处，没有绝对正确的方法。根据实际情况，灵活选择获取数据的方式。
以上是本文的全部内容。我希望你能喜欢它。
