本文介绍了几种常用的前端和后端数据交互方法，并给出了一些建议。从而提高前端协同开发的效率。很详细，推荐给朋友，有需要的朋友可以参考一下。
本文适合前端协同开发经验不足的新手。
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
总结
每种情况都有它的用处，没有绝对正确的方法。根据实际情况，灵活选择获取数据的方式。
以上是本文的全部内容。我希望你能喜欢它。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。