前后端数据应该如何科学交互-js教程-PHP中文网

这次给大家带来前后端数据应该如何科学交互，前后端数据交互的注意事项有哪些，下面就是实战案例，一起来看一下。

HTML赋值

JS赋值

script填充JSON

AJAX获取JSON

WebSocket实时传输数据

总结

1. HTML赋值输出到 Element 的 value 或 data-name

<div data-value="<?php echo $user_avatar;?>"></div>

登录后复制

渲染结果

<div data-avatar="https://avatars1.githubusercontent.com/u/3949015?v=3&s=40"></div>

登录后复制

使用 JS 获取$('input').val();

$(&#39;div&#39;).data(&#39;avatar&#39;);

登录后复制

优点：不占用全局变量，由 JS 自由获取。
使用建议：适合传递简单数据，也非常适合多个简单数据与 Element 绑定关系。

 <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>
  $(&#39;span&#39;).on(&#39;click&#39;,function(){ 
    $.post(&#39;/ajax/remove/&#39;,$(this).data(&#39;userid&#39;),function(data){ // ... })
  })</script>

登录后复制

2. JS赋值
将数据填充到

热门教程

更多>