How front-end and back-end data should interact scientifically

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>

Rendering result

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

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

$('div').data('avatar');

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>

2. JS assignment

Fill data into the
JavaScript variable declaration of 3f1c4e4b6b16bbbd69b2ee476dc4f83a.

<script>
  var user_avatar = "<?php echo $user_avatar;?>";
  // 渲染结果
  // var user_avatar = "https://avatars1.githubusercontent.com/u/3949015?v=3&s=40";</script>

Or use Smarty backend

Template engine:

<script>
  var user_avatar = "{$user_avatar}";</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 there is a newline in the returned data, it will cause a JS error

// The rendering result has a newline character var user_id = "https://avatars1.githubusercontent.com/u/3949015?v=3&s=40" ;// Uncaught SyntaxError: Unexpected token ILLEGAL

Optimization: All content returned by the backend can be stored in a pointed variable, minimizing the use of global variables. Example: // PHP code var SERVER_DATA = { username: {$username}, userid: {$userid}, title: {$title}} // Rendering result 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.

3. The script fills JSON****JSON syntax** Fills JSON data into the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag. The front end obtains the JSON string through the DOM and parses it into an object.

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

Advantages: 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 need to be used when the DOM is loaded. For example: the front-end controls page rendering, and the back-end fills the JSON data source into 3f1c4e4b6b16bbbd69b2ee476dc4f83a and the front-end uses a JavaScript template engine to render the page. How to choose a Javascript template engine?

4. AJAX Gets JSON Use AJAX to get JSON data

<span id="showdata">查看资料</span>
<div style="display:none;" id="box"> 
  <h2>用户信息</h2> 
  <p id="info">![](loading.gif)</p>
</div>
$(&#39;#showdata&#39;).on(&#39;click&#39;,function(){ 
  $(&#39;#box&#39;).show(); 
  $.getJSON(&#39;/ajax/userdata/&#39;,function(oData){ 
    // oData = {"username":"nimojs","userid":1} 
    $(&#39;#info&#39;).html(&#39;用户名：&#39; + oData.username + &#39;<br>用户ID：&#39; + oData.userid); 
  })
})

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

Only view information is displayed on the page

The user clicks to view information

Displays user information and loading pictures

Sends to the server to obtain user information AJAX request

The server returns a JSON string, $.getJSON automatically converts the returned JSON string into an object

Fill the content into 081157ee46b27f016eb1f52f4ee681ce

Advantages: It does not occupy global variables and DOM nodes, and you 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: Additional 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 data), and providing friendly data reading waiting prompts.

5. 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 text messages, WebSocket is like making a phone call to the server.

I won’t introduce much about WebSocket here, but here are the reference materials:

WebSocket**

Building real-time Web applications using HTML5 WebSocket**

Ajax vs WebSocket**

6. Summary There is every situation There is no absolutely right way to be useful in situations. Flexibly choose the data acquisition method according to the actual situation.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Detailed explanation of the box model of html

##Detailed explanation of the use of bootstrap-validator

How to quickly create html header code in sublime

The above is the detailed content of How front-end and back-end data should interact scientifically. For more information, please follow other related articles on the PHP Chinese website!