Summary of front-end and back-end data interaction methods

This article is suitable for novices with little experience in front-end and back-end collaborative development.

HTML assignment

Output to the value or data-name of Element

<input type="hidden" value="<&#63;php echo $user_avatar;&#63;>" />
<div data-value="<&#63;php echo $user_avatar;&#63;>"></div>

Copy after login

Rendering result

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

Copy after login

Use JS to get

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

Copy after login

Advantages:

Does not occupy global variables and can be freely obtained by JS.

Usage suggestions:

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

Copy after login

JS assignment

Populate data into <script>'s JavaScript variable declaration. </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> <script> var user_avatar = "<&#63;php echo $user_avatar;&#63;>"; // 渲染结果 // var user_avatar = "https://avatars1.githubusercontent.com/u/3949015&#63;v=3&s=40"; </script> </pre><div class="contentsignin">Copy after login</div></div> </div> <p>Or use the Smarty backend template engine: </p> <p><script><br /> var user_avatar = "{$user_avatar}";<br /> </script>

Advantages:
Passing data is very convenient. The front end directly calls the user_avatar variable to use the data.

Disadvantages:

To transfer a string data, the global variable user_avatar is occupied. When there is a lot of data to be transmitted, many global variables will be occupied.
If the returned data contains line breaks, it will cause JS to report an error

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

Copy after login

Optimization:

You can store all the content returned by the backend through a certain variable pointed to, minimizing the use of global variables. Example:

// PHP 代码
var SERVER_DATA = {
  username: {$username},
  userid: {$userid},
  title: {$title}
}
// 渲染结果
var SERVER_DATA = {
  username: "NimoChu",
  userid: 1,
  title: 'F2E'
}

Copy after login

Usage suggestions:

Use this method when you need to transfer data to JS as quickly as possible and are very sure that the data is stable. If the data format is complex, it is recommended to use script to fill JSON or AJAX to obtain JSON.

script fills JSON
What is JSON?

Fill JSON data into the