ajax html返回

喀喀喀是

于 2017-02-18 14:20:13 发布

阅读量400

点赞数

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

ajax 专栏收录该内容

7 篇文章

订阅专栏

html代码

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

    <input type="button" value="看新闻">
    <ul></ul>

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

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

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

                document.getElementsByTagName('ul')[0].innerHTML = this.responseText;

            }
        }

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

php代码

<?php

$news = array(

    array('id'=>1,'title'=>'第一条数据'),
    array('id'=>2,'title'=>'第二条数据'),
    array('id'=>3,'title'=>'第三条数据'),

    );

foreach ($news as $n) {
    echo '<li><a href="news.php?id="',$n['id'],'>';
    echo $n['title'];
    echo '</a></li>';
}

?>