需要两个页面:显示表格的html页面index.html(页面内包含js),进行后台处理的php页面index.php
html页面部分:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
//首先要引入jquery
<script type="text/javascript" src="../../jquery-3.2.1.min.js"></script>
//然后引入本页面js
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<table id="tab"></table>
</body>
</html>
php页面部分:
<?php
//连接数据库
$db=new MySQLi(‘localhost‘,‘root‘,‘root‘,‘database‘);
!mysqli_connect_error() or die(‘连接失败‘);
$db->query(‘set names utf8‘);
//写sql命令语句
$sql="select * from table";
//执行sql命令
$res=$db->query($sql);
//将提出的数据转换成数组
$attr=$res->fetch_all();
//执行方法,把数组转换成字符串,并输出
echo ArrToStr($attr);
//方法:数组转字符串
function ArrToStr($arr){
$brr=array();
//将每个字符用“,”和“^”隔开
foreach($arr as $v){
$brr[]=implode(‘,‘,$v);
}
return implode(‘^‘,$brr);
}
?>
js部分:
var tabData="";//定义一个空变量用来存放数据
//ajax获取数据
$.ajax({
async:false,
url:‘index.php‘,
data:{},
type:‘get‘,
dataType:‘text‘,
success:function(data){
tabData=data;
}
});
//页面加载完成后执行
$(function(){
//初始化变量
initVar();
//请求数据,并执行方法将字符串转换成数组
StrToArr(tabData);
})
//方法:初始化变量
function initVar(){
tabDom=$(‘#tab‘);
}
//方法:字符串转数组
function StrToArr(str){
//将在php里加的“,”和“^”去掉,并转成数组
var arr=str.split(‘^‘);
var brr=[];
for(var i in arr){
brr.push(arr[i].split(‘,‘));
}
//调用方法:打印表格
initHtml(brr);
}
//方法:打印表格
function initHtml(arr){
for(var i in arr){
str+=`<tr>`;
for(var j in arr[i]){
str+=`<td>`+arr[i][j]+`</td>`;
}
str+=`</tr>`;
}
$(‘#tab‘).html(str);
}
为什么要将php提出的数据转换成字符串,ajax接受后再将字符串转换成数组?
因为此处ajax接受的数据类型为“text”,所以必须经过这一步
原文地址:https://www.cnblogs.com/xwenbin/p/10223638.html