跨域调用Ajax生成Jquery Table和Bootstrap table-
发布时间：2020-12-16 03:02:29 所属栏目：百科 来源：网络整理
导读：为了测试用HTML直接访问Server端数据，然后生成Table,特意试用了Jquery table和bootstrap table. 前端使用了HTML,Jquery,?jquery.dataTables,?bootstrap-table.具体见index.html中的引入包。由于是跨域访问， 使用了dataType: "jsonp"，并且在后端代码设置了
|
为了测试用HTML直接访问Server端数据，然后生成Table,特意试用了Jquery table和bootstrap table. 后端使用Nodejs.? nodejs的使用方法，请自行查阅。这里只记录一下我们要使用的程序启动命令：E:testnodejssrc>node service.js 1.index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>Backend Data Table Testing</title> 6 <!-- Jquery JS引用 --> 7 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> 8 9 <!-- Bootstrap table JS引用 --> 10 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.css" type="text/css" /> 11 <script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.js"></script> 12 13 <!-- Jquery table JS引用 --> 14 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" type="text/css" /> 15 <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> 16 </head> 17 18 <body> 19 20 <h1><font color=‘red‘>Jquery DataTable testing</font></h1> 21 <table id="example" class="display" style="width:100%"> 22 <thead> 23 <tr> 24 <th>First name</th> 25 <th>Last name</th> 26 <th>Position</th> 27 <th>Office</th> 28 <th>Start date</th> 29 <th>Salary</th> 30 </tr> 31 </thead> 32 </table> 33 34 35 <hr/><hr/><br/><br/><br/> 36 <h1><font color=‘red‘>Jquery DataTable testing2</font></h1> 37 <table id="table2" class="display" style="width:100%"> 38 <thead> 39 <tr> 40 <th> name</th> 41 <th>sex </th> 42 <th>age</th> 43 </tr> 44 </thead> 45 </table> 46 <hr/><hr/><br/><br/><br/> 47 48 49 <h1><font color=‘red‘>bootstrapTable testing()跨域</font></h1> 50 <table id="table3"></table> 51 52 <hr/><hr/><br/><br/><br/> 53 <input type="button" value="show table1" class="form-control" onclick="getvalue1()"/> 54 <input type="button" value="show table2" class="form-control" onclick="getvalue2()"/> 55 <input type="button" value="show table3" class="form-control" onclick="getvalue3()"/> 56 57 <div id="employeeInfo" class="box-content"> 58 </div> 59 60 <script type="text/javascript"> 61 62 function getvalue1() { 63 $(‘#example‘).DataTable( { 64 ajax: { 65 url: "http://localhost:8081/listUsers", 66 dataType: "jsonp", 67 "jsonp":"callback", 68 "jsonpCallback":"success_jsonpCallback" 69 } 70 } ); 71 } 72 73 function getvalue2() { 74 $(‘#table2‘).DataTable( { 75 "processing": true, 76 "serverSide": true, 77 ajax: { 78 url: "http://localhost:8081/listUsers2", 79 dataType: "jsonp", 80 "jsonp":"callback", 81 "jsonpCallback":"success_jsonpCallback" 82 } 83 } ); 84 } 85 86 87 function getvalue3() { 88 $.ajax({ 89 "url": "http://localhost:8081/listUsers3", 90 "dataType": "jsonp", 91 "jsonp":"callback", 92 "jsonpCallback":"success_jsonpCallback", 93 "success":function(json,status){ 94 console.log(json); 95 for(var i = 0; i < json.rows.length; i++){ 96 if(i == ‘0‘ && json.state == ‘3‘){ 97 json.rows[i].icon = ‘end‘; 98 }else if(i == json.rows.length-1){ 99 json.rows[i].icon = ‘start‘; 100 }else{ 101 json.rows[i].icon = ‘step‘; 102 } 103 }; 104 105 console.log(status + "用户信息111："+json.rows[1].id); 106 switch(status){ 107 case ‘success‘: 108 creatbootstrapTable($(‘.table-progress‘),json.rows); 109 break; 110 default : 111 alert(‘error‘); 112 break; 113 } 114 } 115 }); 116 } 117 118 //调用bootstrapTable控件，数据用传入的json data. 119 function creatbootstrapTable($_obj,tableData){ 120 var table = $(‘#table3‘).bootstrapTable({ 121 //url: "http://localhost:8081/listUsers3", 122 data: tableData,123 dataType: "json",124 method: ‘get‘,//请求方式（*） 125 //toolbar: ‘#toolbar‘,//工具按钮用哪个容器 126 striped: true,//是否显示行间隔色 127 cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） 128 pagination: true,//是否显示分页（*） 129 sortable: false,//是否启用排序 130 sortOrder: "asc",//排序方式 131 sidePagination: "server",//分页方式：client客户端分页，server服务端分页（*） 132 pageNumber:1,//初始化加载第一页，默认第一页 133 pageSize: 8,//每页的记录行数（*） 134 pageList: [8,10,25,50,100],//可供选择的每页的行数（*） 135 search: false,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 136 strictSearch: true,137 showColumns: false,//是否显示所有的列 138 showRefresh: true,//是否显示刷新按钮 139 minimumCountColumns: 2,//最少允许的列数 140 clickToSelect: true,//是否启用点击选中行 141 //height: 500,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 142 showToggle:false,//是否显示详细视图和列表视图的切换按钮 143 cardView: false,//是否显示详细视图 144 detailView: false,//是否显示父子表 145 //得到查询的参数 146 queryParams : function (params) { 147 return { 148 pageSize: params.limit,149 pageNumber: params.offset/params.limit+1, 150 }; 151 },152 columns: [{ 153 checkbox: true,154 visible: true //是否显示复选框 155 },{ 156 field: ‘id‘,157 title: ‘id‘ 158 159 },{ 160 field: ‘name‘,161 title: ‘name‘ 162 163 },{ 164 field: ‘age‘,165 title: ‘age‘ 166 167 }],168 onLoadSuccess: function (sta) { 169 console.log("in onLoadSuccess"); 170 console.log(sta); 171 },172 onLoadError: function (status,res) { //加载失败时执行 173 alert("onLoadError"); 174 console.log(res); 175 console.log(status); 176 } 177 }); 178 } 179 </script> 180 </body> 181 </html> 2. NodeJS的入口程序service.js
1 var express = require(‘express‘); 2 var app = express(); 3 var fs = require("fs"); 4 5 //添加的新用户数据 6 var user = { 7 "user4" : { 8 "name" : "mohit", 9 "password" : "password4",10 "profession" : "teacher",11 "id": 4 12 } 13 } 14 15 16 17 app.get(‘/listUsers‘,function (req,res) { 18 fs.readFile( __dirname + "/" + "users.json",‘utf8‘,function (err,data) { 19 console.log( data ); 20 21 /**设置响应头允许ajax跨域访问**/ 22 res.setHeader("Access-Control-Allow-Origin","*"); 23 /*星号表示所有的异域请求都可以接受，*/ 24 res.setHeader("Access-Control-Allow-Methods","GET,POST"); 25 26 27 res.end( data ); 28 }); 29 }) 30 31 32 app.get(‘/listUsers2‘,res) { 33 fs.readFile( __dirname + "/" + "users2.json",data) { 34 console.log( data ); 35 36 /**设置响应头允许ajax跨域访问**/ 37 res.setHeader("Access-Control-Allow-Origin","*"); 38 /*星号表示所有的异域请求都可以接受，*/ 39 res.setHeader("Access-Control-Allow-Methods",POST"); 40 41 42 res.end( data ); 43 }); 44 }) 45 46 app.get(‘/listUsers3‘,res) { 47 fs.readFile( __dirname + "/" + "users3.json",data) { 48 console.log( data ); 49 50 /**设置响应头允许ajax跨域访问**/ 51 res.setHeader("Access-Control-Allow-Origin","*"); 52 /*星号表示所有的异域请求都可以接受，*/ 53 res.setHeader("Access-Control-Allow-Methods",POST"); 54 55 56 res.end( data ); 57 }); 58 }) 59 60 61 62 app.get(‘/addUser‘,res) { 63 // 读取已存在的数据 64 fs.readFile( __dirname + "/" + "users.json",data) { 65 data = JSON.parse( data ); 66 data["user4"] = user["user4"]; 67 console.log( data ); 68 res.end( JSON.stringify(data)); 69 }); 70 }) 71 72 var server = app.listen(8081,function () { 73 74 var host = server.address().address 75 var port = server.address().port 76 console.log("应用实例，访问地址为 http://%s:%s",host,port) 77 78 }) 3.NodeJS 的service.js调用的3个Json文件
1 success_jsonpCallback( 2 3 { 4 "draw": 1, 5 "recordsTotal": 57, 6 "recordsFiltered": 57, 7 "data": [ 8 [ 9 "Airi",10 "Satou",11 "Accountant",12 "Tokyo",13 "28th Nov 08",14 "$162,700" 15 ],16 [ 17 "Cedric",18 "Kelly",19 "Senior Javascript Developer",20 "Edinburgh",21 "29th Mar 12",22 "$433,060" 23 ] 24 ] 25 } 26 27 ) 3.2 users2.json
1 success_jsonpCallback( 2 3 { 4 "draw": 1, 7 "data": [ 8 [ 9 "zhangsan",10 "male",11 "18" 12 ],13 [ 14 "lisi",15 "female",16 "25" 17 ] 18 ] 19 } 20 21 ) 3.3
1 success_jsonpCallback( 2 3 { 4 "total": 364, 5 "rows": [{ 6 "id": "1", 7 "name": "zhang san", 8 "age": 30 9 10 },{ 11 "id": "2",12 "name": "Li si",13 "age": 25 14 15 }] 16 } 17 18 19 20 21 ) （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
