<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
<style>
#box{
1000px;
min-height:100px;
padding:20px;
border:1px solid #999;
}
</style>
</head>
<body>
<h1>jsonp 处理复杂的响应结果</h1>
<button onclick="loadHtml()">加载</button>
<div id="box"></div>
<script>
function loadHtml(){
//创建script
var script = document.createElement('script');
script.src = "http://127.0.0.1/s32/JS10_Jquery01/lessson/3.php";
//添加元素
document.body.appendChild(script);
//移除
document.body.removeChild(script);
}
//处理返回数据的函数
function makeHtml(data){
//alert(data);
var table = document.createElement("table");
table.width = 800;
table.border =1;
table.cellSpacing =0;
table.cellPadding =5;
//添加表头
var tr = table.insertRow(0);
var th = document.createElement('th');
th.innerHTML = "id";
tr.appendChild(th);
var th = document.createElement('th');
th.innerHTML = "name";
tr.appendChild(th);
var th = document.createElement('th');
th.innerHTML = "sex";
tr.appendChild(th);
var th = document.createElement('th');
th.innerHTML = "grade";
tr.appendChild(th);
//添加数据
for (var i =0 ;i < data.length; i ++){
var tr = table.insertRow(i+1);
tr.insertCell(0).innerHTML = data[i].id;
tr.insertCell(1).innerHTML = data[i].name;
tr.insertCell(2).innerHTML = data[i].sex;
tr.insertCell(3).innerHTML = data[i].grade;
}
//追加 table 清空原先的
document.getElementById('box').innerHTML = "";
document.getElementById('box').appendChild(table);
}
</script>
</body>
</html>
3.php
<?php header('Content-type:text/html;charset=utf-8'); //实例化pdo try { $pdo = new PDO('mysql:host=localhost;dbname=yyy', 'root', '123456'); $pdo->exec("set names utf8"); }catch (PDOException $e) { echo $e->getMessage(); exit; } $stmt = $pdo->prepare("select * from student"); $stmt->execute(); $data = $stmt->fetchAll(PDO::FETCH_ASSOC); echo "makeHtml(".json_encode($data).")";