The rear end of the data transfer to the foreground set list display HTML (Table)
Keywords: front and back office data transfer problem web project
In the process of learning web project, we will certainly come across front and back office data exchange problems. The question I think for a long time, thereby sum up today. Because bloggers limited, if inappropriate, please correct me a lot ,, nonsense is not said to business.
A, HTML pages, send http request by ajax
1, a front end normal HTML pages, as follows.
(Page introduces jquery, has a form page)
2, transmission request via ajax
The window.onload. 1 (requestData function () {
2 $ .ajax ({
. 3 URL: "address to access",
. 4 type: "POST",
. 5 dataType: "JSON",
. 6 Success: function (Data) {
. 7 / * this code is executed after the method where a transmission request is ajax success * /
. 8 showData (data); // we do only show the data
. 9},
10 error: function (MSG) {
. 11 Alert ( "ajax connection exception:" + msg );
12}
13});
14});
3, the background data
@RequestMapping. 1 (value = "/ queryAllStudent")
2 public void Query (the HttpServletResponse RESP) {
. 3 the try {
. 4 / * List is stored in the set of student many objects * /
. 5 List <Student> Students. UserService.getAllStudentInfo = ();
6 / * set list will be loaded into json objects * /
. 7 = JSONArray.fromObject the JSONArray data (Students.);
. 8 // send data next
9 / * set the encoding, to prevent distortion problems * /
10 resp.setCharacterEncoding ( "UTF -8 ");
11 / * get the output stream * /
12 is the PrintWriter respWritter resp.getWriter = ();
13 is / * the transmission toString JSON format object * / (after)
14 respWritter.append (data.toString ());
15} catch (Exception e) {
16 e.printStackTrace ();
17}
18}
Student {public class. 1
2 Private ID int; // ID
. 3 Private String name; // name
4 private String password; // password
. 5
. 6 // get set method will be omitted. . .
7}
4, front display data (in tabular form)
Display data 1 //
2 showData function (Data) {
. 3 var STR = ""; // string defined for splicing
. 4 for (var I = 0; I <data.length; I ++) {
. 5 // splicing table the row and column
6 str = "<tr> < td>" + data [i] .name + "</ td> <td>" + data [i] .password + "</ td> </ tr>" ;
7 // appended to the table
. 8 $ ( "# Tab") the append (STR);.}
10}
5. This completes the transmission of data
Second, the data transfer process
前台(html)发送ajax请求 --> 后台servlet中接受到请求，然后响应数据(来自数据库或其他) --> 前台（HTML）
ajax接受数据，处理数据(以表格显示).
最后测试一下显示效果
谢谢！
关键字：web项目中前后台数据传递问题
在学习web项目的过程中，我们肯定会遇到前后台数据交换问题。这个问题我也思考了很久，今天借此总结一下。由于博主水平有限，如有不当之处，还请大家多多指正，，废话不所说进入正题。
一、HTML页面通过ajax发送http请求
1，前端有个普通的HTML页面，如下。
（页面引入了jquery，页面有个表格）
2，通过ajax发送请求
1 window.onload(function requestData(){
2 $.ajax({
3 url: "要访问的地址",
4 type: "post",
5 dataType: "json",
6 success: function(data){
7 /*这个方法里是ajax发送请求成功之后执行的代码*/
8 showData(data);//我们仅做数据展示
9 },
10 error: function(msg){
11 alert("ajax连接异常："+msg);
12 }
13 });
14 });
3，后台的数据
1 @RequestMapping(value="/queryAllStudent")
2 public void query(HttpServletResponse resp) {
3 try {
4 /*list集合中存放的是好多student对象*/
5 List<Student> students = userService.getAllStudentInfo();
6 /*将list集合装换成json对象*/
7 JSONArray data = JSONArray.fromObject(students);
8 //接下来发送数据
9 /*设置编码，防止出现乱码问题*/
10 resp.setCharacterEncoding("utf-8");
11 /*得到输出流*/
12 PrintWriter respWritter = resp.getWriter();
13 /*将JSON格式的对象toString()后发送*/
14 respWritter.append(data.toString());
15 } catch (Exception e) {
16 e.printStackTrace();
17 }
18 }
1 public class student {
2 private int id;//id
3 private String name;//姓名
4 private String password;//密码
5
6 //省略get set方法。。。
7 }
4，前台展示数据（表格形式）
1 //展示数据
2 function showData(data) {
3 var str = "";//定义用于拼接的字符串
4 for (var i = 0; i < data.length; i++) {
5 //拼接表格的行和列
6 str = "<tr><td>" + data[i].name + "</td><td>" + data[i].password + "</td></tr>";
7 //追加到table中
8 $("#tab").append(str); }
10 }
5. This completes the transmission of data
Second, the data transfer process
Front (html) transmits ajax request -> Background servlet receives the request and the response data (or from another database) -> Front (HTML)
ajax receiving data, processing data (shown in the table).
Finally, test results show
Thank you!