ajax json数据返回

最新推荐文章于 2024-11-16 21:54:37 发布

喀喀喀是

最新推荐文章于 2024-11-16 21:54:37 发布

阅读量202

点赞数

分类专栏： ajax 文章标签： ajax

ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <input type="button" value="换一首">
    <h1>名称</h1>
    <h2>作者</h2>
    <p>内容</p>

</body>
<script type="text/javascript">

    document.getElementsByTagName('input')[0].onclick = function(){

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(this.readyState == 4){

                var res = eval('('+this.responseText+')');

                document.getElementsByTagName('h1')[0].innerHTML = res.title;
                document.getElementsByTagName('h2')[0].innerHTML = res.author;
                document.getElementsByTagName('p')[0].innerHTML = res.content;

            }
        }

        xhr.open('get','1.php',true);
        xhr.send(null);
    }
</script>
</html>

php代码

<?php
// header("Content-Type: text/html; charset=utf-8");

$data = array();

$data[] = array(
    'title'=>'渡汉江',
    'author'=>'李频',
    'content'=>'玲外音书绝，经东夏立春。近乡情更怯，不敢问来人'
    ); 


$data[] = array(
    'title'=>'寻隐者不遇',
    'author'=>'贾岛',
    'content'=>'松下问童子，言师采药去。只在此山中，云师不知处'
    ); 

$data[] = array(
    'title'=>'江雪',
    'author'=>'贾岛',
    'content'=>'千山鸟飞绝，万径人踪灭。孤舟蓑笠翁，独钓寒江雪'
    ); 

$i = mt_rand(0,2);

echo json_encode($data[$i]);

?>