The data in the backend list collection is passed to the foreground HTML display (tabular form)

Tag: Service appears with use Send password Bubuko string HTML purpose

Key Words: front and back data transfer problems in Web projects

In the process of learning Web projects, we will certainly encounter the front and back data exchange problems. I've been thinking about this for a long time, so I'll summarize it today. Due to the limited level of Bo Master, if there are inappropriate, but also please make a lot of corrections, nonsense not said into the topic.

An HTML page sends an HTTP request via Ajax

1, the front end has a normal HTML page, as follows.

(the page introduces jquery, the page has a table)

2, sending requests via Ajax

1 window.onload (function RequestData () {2 $.ajax ({3Url:"the address to be accessed",4Type"Post",5DataType:"JSON",6 success:function (data) {7                 /*in this method, the code that executes after the AJAX send request succeeds*/8ShowData (data);//We only do the data show9             },Ten error:function (msg) { OneAlert"Ajax Connection Exceptions:"+msg); A             } -         }); -});

3, data in the background

1@RequestMapping (value= "/queryallstudent")2      Public voidquery (HttpServletResponse resp) {3         Try {4             /*many student objects are stored in the list collection*/5list<student> students =userservice.getallstudentinfo ();6             /*to replace a list collection with a JSON object*/7Jsonarray data =Jsonarray.fromobject (students);8             //next send the data9             /*set the encoding to prevent garbled problems*/TenResp.setcharacterencoding ("Utf-8"); One             /*get the output stream*/ APrintWriter Respwritter =Resp.getwriter (); -             /*sends a JSON-formatted object after ToString ()*/ - Respwritter.append (data.tostring ()); the}Catch(Exception e) { - e.printstacktrace (); -         } -}

 1  public  class   student { 2   Private  int  ID; // id  3  private  String name;//  name  4  private  String password; //  password  5  6  //    omit Get Set method ...  7 } 

4, front desk display data (tabular format)

1 //Show Data2 function ShowData (data) {3var str = "";//define a string for stitching4          for(var i = 0; i < data.length; i++) {5             //splicing rows and columns of a table6str = "<tr><td>" + data[i].name + "</td><td>" + Data[i].password + "</td></tr>";7             //Append to Table8$ ("#tab"). append (str);         }Ten}

5, this completes the transfer of data

Second, the flow of data transmission

The foreground (HTML) sends the AJAX request --The background servlet accepts the request , and then responds to the data (from the database or other)--the foreground (HTML)

Ajax accepts data, Process the data (shown in a table).

finally test the display effect

Thank you!

The data in the backend list collection is passed to the foreground HTML display (tabular form)