前端-Ajax和JSON解析数据

Ajax和JSON解析数据

1，.json 文本端存放数据

// .json 文本端先存放数据
// stars.json
[
    {
        "champion_name":"洛",
        "champion_title":"幻翎",
        "champion_icon":"images/1498684526225.jpg"
    },
    {
        "champion_name":"霞",
        "champion_title":"逆羽",
        "champion_icon":"images/14986825325225.jpg"
    },
    {
        "champion_name":"洛",
        "champion_title":"幻翎",
        "champion_icon":"images/1498684526225.jpg"
    },
    {
        "champion_name":"霞",
        "champion_title":"逆羽",
        "champion_icon":"images/14986825325225.jpg"
    }
]

2, .php 端读取数据并返回

// .php 端 从json文本中读取数据+返回数据
<?php
    // 设置返回的是JSON
    header('content-type:application/json;charset=utf-8');
    // JSON 也要设置一段内容
    //读取JSON文件
    //$jsonString = file_get_contents('data/info.json');    
    //返回读取的内容
    //echo $jsonString;
    echo file_get_content('data/info.json)
?>

3, .html 端请求数据+解析数据

//.html 请求数据+解析数据(<script>操作在这里面进行</script>)
//注册事件
document.querySelector('input').onclick = function(){
    //1，创建异步对象
    var xhr = new XMLHttpRequest();
    //2，设置请求行
    xhr.open('get','backHero.php');
    //3,设置请求头(get请求可以省略)

    //4,注册状态改变事件(也即是 回调函数)
    xhr.onreadystatechange = function(){
        // 判断状态 & 请求 是否成功并使用数据
        if(xhr.readyState == 4 && xhr.status == 200){
            //解析JSON 数据
            var heroArr = JSON.parse(xhr.responseText);
            var html='';
            html+='<table>';
            生成tr
            for(var i=0;i<heroArr.length;i++){
                //对象数组进行循环
                var currentHero = heroArr[i];
                // tr 开头
                 html+='<tr>';
                // td
                html+='<td>'+currentHero.champion_name+'</td>;
                html+='<td>'+currentHero.champion_title+'</td>;
                html+='<td><img src"'+currentHero.champion_icon+'"></td>;

                // tr 结尾
                 html +='</tr>';
            }
            // table 结尾
            html +='</table>';
              // 数据拼接好之后 设置到页面上
               document.querySelector('.show-inbox').innerHTML = html;
        }
        // 5，发送请求
        xhr.send(null);
    }
}

泡泡：

根据原来存放在文件中的数据，进行向前端数据的返回，涉及到两个重要的知识点
1，异步对象的创建和操作
		 var xhr = new XMLHttpRequest(); 					i 创建异步对象
		 xhr.open('get','backHero.php');					ii 设置请求行
		 xhr.onreadystatechange = function(){};				iv 回调函数
		 if(xhr.readyState == 4 && xhr.status == 200){};	vi 判断状态&请求是否成功并使用数据
2，字符串拼接操作
		var html='';
        html+='<table>';
        html+='<tr>';
        html+='<td>'+currentHero.champion_name+'</td>;
        html+='<tr>';
        html+='<table>';
3,更改页面上数据
		document.querySelector('.show-inbox').innerHTML = html;