前后端数据交互方法总结

       

在此总结几种常用的前后端数据交互方法,并给出使用建议。
目录:

  1. HTML赋值
  2. JS赋值
  3. script填充JSON
  4. AJAX获取JSON
  5. WebSocket实时传输数据
  6. 总结
  1. HTML

输出到 Element value data-name

<input type="hidden" value="$user_avatar;?>" />

<div data-value="$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>

  1. JS

将数据填充到 

你可能感兴趣的:(前后端数据交互方法总结)