前後端數據應該如何科學交互-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賦值
將資料填入

熱門教學

更多>

相關教學