前后端数据交互方法 汇总

这篇文章给大家介绍几种常用的前后端数据交互方法，并给出使用建议。以提高前后端协同开发的效率。非常的详细，推荐给小伙伴们，有需要的小伙伴可以参考下。

1、HTML赋值

输出到 Element 的 value 或 data-name

1 <input type="hidden" value="" /> 
2 <div data-value="">div>

渲染结果

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

2、使用 JS 获取

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

优点：

不占用全局变量，由 JS 自由获取。

使用建议：

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

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

3、JS赋值

将数据填充到

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

缺点：

为了传递一个字符串数据占用了全局变量 user_avatar，当有很多数据需要传输时则会占用很多全局变量。
如果返回数据存在换行将会导致JS报错

1 // 渲染结果有换行符
2 var user_id = "https://avatars1.githubusercontent.com/u/3949015?v=3&s=40"; 
3 // Uncaught SyntaxError: Unexpected token ILLEGAL

优化：

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

 1 // PHP 代码
 2 var SERVER_DATA = {
 3   username: {$username}, 
 4   userid: {$userid},
 5   title: {$title}
 6 }
 7 // 渲染结果
 8 var SERVER_DATA = {
 9   username: "NimoChu",
10   userid: 1,
11   title: 'F2E'
12 }

使用建议：

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

4、script填充JSON
什么是JSON？

填充 JSON 数据到 2

优点：

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

缺点：

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

使用建议：

适合传递在DOM加载完成时就需要用到的大量数据集合。例如：前端控制页面渲染，后端将JSON数据源填充到