jsonp 处理复杂的响应结果 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
    <style>
        #box{
            width: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).")";

 

posted on 2015-12-20 14:19  岩_生  阅读(272)  评论(0)    收藏  举报

导航