Ajax + JSON + jquery -- cutting-edge

Today, I want to write my personal feelings. Of course, there must be many shortcomings. If any of you find anything inappropriate, I hope to point it out. First, I will introduce my ideas from the perspective of the overall situation. Then, I will explain the specific implementation in detail from the next article.

 

Currently, most websites (in my opinion) on the Internet do not use asynchronous data transmission methods like Ajax. Ajax has two features: asynchronous data transmission and page refreshing. In a way, this is also its advantage. But Ajax has two disadvantages: first, it is troublesome to bind the data sent from the server (generally in XML format) to the control. Second, JavaScript code must be involved when Ajax technology is used. Once the JS Code in it fails, it is not that easy to identify the error. I personally think that AJAX cannot be used in the web design field because of the above two points. Ajax will be introduced in the next article.

 

I need to declare that this series of articles focus on AJAX technology to implement asynchronous data transmission. They only use JSON and jquery technologies to improve the efficiency of Ajax in website development, it also makes up for the shortcomings of Ajax in the two aspects discussed above, and this is also the main purpose of my writing this article.

 

The principle is to write some common logic JS methods through JSON and jquery. These methods mainly process two tasks: first assemble the data to be sent, and second, process the data sent from the server, for example, bind the data sent from the server to the control, while the Ajax method body only needs to send and accept these two actions. With the help of JSON and jquery, Ajax is easy to implement website development.

 

Let's assume that we want to implement a business logic: display a record in the student table. The structure 2 of the student table is shown in Figure 1. The data stream that uses our method to process this business logic is shown in Figure 1. (The background code language used in this article is C #, and the database is sqlserver)

Figure 1

 

 

Figure 2

 

See the corresponding descriptions of each step in Figure 1:

1. This js method involves the JSON + jquery technology. It is mainly used to traverse a DIV, obtain the ID attributes of all controls in it, and then form a logical condition string. The ID naming rules of the controls for displaying data must contain the table name and the attribute name of the table. The specific provisions will be detailed in subsequent chapters.

For the following description, we assume that the client has three span controls and a div.

<Div id = "studentid">

<Span id = "lbstudent_name"> </span>

<Span id = "lbstudent_age"> </span>

<Span id = "lbstudent_number"> </span>

<Div>

2. Here we can understand that this business logic condition is obtained by traversing the DIV to obtain the ID of the span control. Finally, we get a string like this:

"Student_name: student_age: student_number"

 

3. In the background code, call a method (you can write it yourself) and configure the preceding logical conditions into an SQL statement, as shown below:

"Select student. Name, student. Age, student. Number from student"

 

Some readers will ask why the Control ID name in step 1 should contain the table name and attribute name. This is to dynamically configure SQL statements.

4. This js method involves the JSON + jquery technology, and then obtains data from the database. The obtained data may be a datatable or student object according to your habits.

5. here we need to write a method to construct the result of the preceding SQL statement into a JSON string, as shown in figure 2, the final JSON string can be as follows:

{"Student_name": "Yu", "student_age": "23", "student_number": "200717030102 "}

Here, I am also prompted that you can download many plug-ins on the Internet that convert objects into JSON format.

 

6. The reader must have a question:, why should the data obtained from the database be converted to a JSON string, why should the name of each key of a JSON string contain the table name and attribute name, for example, student_name?

To send the JSON string to the client, the client can dynamically bind the data to each control by calling a common js method. I will give you an example in the following article.

The content written above may be a little abstract. I will write some examples tomorrow to illustrate each step in figure 1, which will be better understood at that time.