How front-end and back-end data should interact scientifically-JS Tutorial-php.cn

This time I will bring you how to scientifically interact with front-end and back-end data. What are the precautions for front-end and back-end data interaction? Here are practical cases, let’s take a look.

HTML assignment

JS assignment

script fills JSON

AJAX gets JSON

WebSocket real-time transmission of data

Summary

1. HTML assignment output to the value or data-name of Element

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

Copy after login

Rendering result

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

Copy after login

Use JS to get $('input').val();

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

Copy after login

Advantages: It does not occupy global variables and can be obtained freely by JS.

Usage suggestions: Suitable for
passing simple data, and also very suitable for binding relationships between multiple simple data and 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>

Copy after login

2. JS assignment

Fill data into the
JavaScript variable declaration of