Summary of front-end and back-end data interaction methods_Basic knowledge

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>

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>

Use JS to get

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

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>

JS assignment

Populate data into <script>'s JavaScript variable declaration. </script>

<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>

Or use the Smarty backend template engine:

<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?v=3&s=40";
// Uncaught SyntaxError: Unexpected token ILLEGAL

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'
}

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 <script> tag, and the front end obtains the JSON string through the DOM and parses it into an object. </script>

<script type="text/template" id="data">{"username":"nimojs","userid":1}</script>
<script>
var data = JSON.parse($('#data').html());
//{username:"nimojs",userid:1}
</script>

Advantages:

The data can be obtained after the page is loaded. It does not occupy global variables and can pass large amounts of data collections.

Disadvantages:

When the amount of data is particularly large, the initial loading of the page will be slow. The slowdown is not only caused by the file size, but also because it takes time for the server to query the data and return the collection. You can use AJAX to obtain JSON to complete on-demand loading and load waiting.

Usage suggestions:

Suitable for passing large data collections that are needed when the DOM is loaded. For example: the front-end controls page rendering, the back-end fills the JSON data source into <script> and the front-end uses a JavaScript template engine to render the page. </script>

AJAX Get JSON

Use AJAX to get JSON data

<span id="showdata">查看资料</span>
<div style="display:none;" id="box">
  <h2 id="用户信息">用户信息</h2>
  <p id="info"><img  src="/static/imghwm/default1.png"  data-src="loading.gif"  class="lazy" / alt="Summary of front-end and back-end data interaction methods_Basic knowledge" ></p>
</div>
$('#showdata').on('click',function(){
  $('#box').show();
  $.getJSON('/ajax/userdata/',function(oData){
    // oData = {"username":"nimojs","userid":1}
    $('#info').html('用户名：' + oData.username + '<br>用户ID：' + oData.userid);
  })
})

This is an example of obtaining user information through AJAX. The process is as follows:

Only viewing information is displayed on the page
User clicks to view information
Display user information and loading image
Send an AJAX request to the server to obtain user information
The server returns a JSON string, and $.getJSON automatically converts the returned JSON string into an object
Fill in the content to

Advantages:

Does not occupy global variables and DOM nodes, and can freely control the trigger conditions for obtaining data (when the page is loaded, when the user clicks to view information, or when the user clicks a button). When starting to obtain data, you can use the loading image placeholder to prompt the user that the data is being read. Prevents slow page loading caused by loading all the data on the page.

Disadvantages:

Extra HTTP requests will be generated. It cannot be obtained immediately after the DOM is loaded. It needs to send a request and receive a response.

Usage suggestions:

Suitable for loading non-main information, setting trigger conditions (when the user clicks to view information), and providing friendly data reading waiting prompts.

WebSocket transmits data in real time
If AJAX requests and responses are compared to sending text messages to the server and waiting for the server to reply to the text messages, WebSocket is like making a phone call to the server.

I won’t introduce much about WebSocket here. Reference materials are attached:

Wiki:WebSocket
Build real-time web applications using HTML5 WebSocket
Ajax vs WebSocket

Summary
There is a place for every situation and there is no absolute right way to do it. Flexibly choose the data acquisition method according to the actual situation.

The above is the entire content of this article, I hope you all like it.