Summarizes the Data Interaction methods at the front and back ends, and summarizes the data interaction at the end.

Summarizes the Data Interaction methods at the front and back ends, and summarizes the data interaction at the end.

This article is suitable for beginners who have insufficient experience in frontend and backend collaborative development.

HTML assignment

Value or data-name output to Element

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

Rendering result

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

Get with JS

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

Advantages:

Global variables are free to be obtained by JS.

Suggestions:

It is suitable for transferring simple data, and is also suitable for binding multiple simple data and elements.

<Ul> <li> nimojs <span data-userid = "1"> Delete </span> </li> <li> nimo22 <span data-userid = "2"> delete </span> </li> <li> nimo33 <span data-userid = "3"> Delete </span> </li> <li> nimo44 <span data- userid = "4"> Delete </span> </li> <li> nimo55 <span data-userid = "5"> Delete </span> </li> </ ul> <script >$ ('span '). on ('click', function () {$. post ('/ajax/remove/', $ (this ). data ('userid'), function (data ){//...})}) </script>

JS assignment

Fill the data in the JavaScript variable declaration of <script>.

<Script> var user_avatar = "<? Php echo $ user_avatar;?> "; // Rendering result // var user_avatar =" https://avatars1.githubusercontent.com/u/3949015? V = 3 & s = 40 "; </script>

Or use the Smarty backend template engine:

<Script>
Var user_avatar = "{$ user_avatar }";
</Script>

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

Disadvantages:

To pass a string of data that occupies the global variable user_avatar, many global variables are used when many data needs to be transmitted.
If a line break exists in the returned data, JS reports an error.

// The rendering result has a linefeed 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 by pointing to a variable, occupying the global variable to a minimum. Example:

// PHP code var SERVER_DATA = {username: {$ username}, userid: {$ userid}, title: {$ title} // rendering result var SERVER_DATA = {username: "NimoChu", userid: 1, title: 'f2e '}

Suggestions:

This method is used when the data needs to be transmitted to JS as quickly as possible and the data is determined to be stable. If the data format is complex, we recommend that you use script to fill in JSON or AJAX to obtain JSON.

Script filling JSON
What is JSON?

Fill JSON data in the <script> tag. The front-end obtains the JSON string through DOM and parses it into an object.

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

Advantages:

Data can be obtained after the page is loaded. A large number of data sets can be passed without occupying global variables.

Disadvantages:

When the data volume is too large, page loading slows down for the first time. Slow loading is not only caused by the file size, but also because it takes time for the server to query data and return a collection, AJAX can be used to obtain JSON for loading and waiting.

Suggestions:

It is suitable for transferring a large number of data sets required when DOM loading is complete. For example, the front-end controls page rendering, and the backend fills in the JSON data source to <script>. The front-end uses the JavaScript template engine for page rendering.

Obtain JSON using AJAX

Use AJAX to obtain JSON data

<Span id = "showdata"> View materials </span> <div style = "display: none; "id =" box "> 
This is an example of getting user data through AJAX. The process is as follows:
Only view information is displayed on the page.
Click to view information
Show user information and loading Images
Send an AJAX request to the server to obtain user information
The server returns a JSON string. $. getJSON automatically converts the returned JSON string to an object.
Fill in the content to <p id = "info">
Advantages:
Without occupying global variables and DOM nodes, You can freely control the trigger conditions for getting data (when the page is loaded, when the user clicks to view information or when the user clicks a button ). When obtaining data, you can use the loading image placeholder to prompt that the user data is being read. Prevents slow page loading due to loading of all data on the page.
Disadvantages:
An additional HTTP request is generated. It cannot be obtained immediately after DOM loading. You need to send a request to receive a response.
Suggestions:
It is suitable for loading non-main information, setting trigger conditions (when users click to view information), and providing friendly data read wait prompts.
WebSocket real-time data transmission
If AJAX requests and responses are compared to sending text messages to the server and waiting for the server to reply to the text message, WebSocket is like making a call with the server.
I will not introduce WebSocket too much here, with reference:
Wiki: WebSocket
Use HTML5 WebSocket to build real-time Web applications
Ajax vs WebSocket
Summary
Each scenario is useful in every situation, and there is no absolutely correct method. You can flexibly select the data retrieval method based on the actual situation.
The above is all the content of this article. I hope you will like it.