前端-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// 设置返回的是JSONheader('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>';生成trfor(var i=0;i<heroArr.length;i++){//对象数组进行循环var currentHero = heroArr[i];// tr 开头html+='<tr>';// tdhtml+='<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;

前端-Ajax和JSON解析数据相关推荐

Ajax 发送json格式数据以及发送文件(FormData)和自带的序列化组件: serializers
前后端传输数据的编码格式(contentType) get请求数据就是直接放在url?后面的 url?usernmae=junjie&password=123... 可以向后端发送post请求 ...
Ajax 提交json格式数据给后台
Ajax 提交json格式数据在实际的开发当中,尤其是在前后端分离的项目中,传输数据都是以json格式进行传输的,所以对于json格式数据的情求和响应的学习十分重要. 1.前端提交json格式数据 ...
ajax前台获取json,ajax与json 获取数据并在前台使用简单实例
ajax与json 获取数据并在前台使用简单实例发布于 2017-05-18 14:05:38 | 63 次阅读 | 评论: 0 | 来源: 网友投递 AjaxAJAX即"Asynchro ...
Json解析数据导致顺序改变问题
Json解析数据导致顺序改变问题 json解析的时候,通常顺序会发生改变,如果我们有保持原有顺序的需求的话可以通过如下方式使用fastJson的Feature.OrderedField JSONOb ...
java跨域解析json数据_java后台设计简单的json数据接口，设置可跨域访问，前端ajax获取json数据...
在开发的过程中,有时候我们需要设计一个数据接口.有时候呢,数据接口和Web服务器又不在一起,所以就有跨域访问的问题. 第一步:简单的设计一个数据接口. 数据接口,听起来高大上,其实呢就是一个简单的Se ...
前端ajax传递json格式参数，后端springboot接收
在做开发的过程中,前端ajax传参和后端springboot接收参数经常用到,之前老是把这些搞混,导致出现错误,也在网上查阅了很多资料,再根据自己的经验和测试,对这部分内容做了一些使用总结.后面会再慢 ...
在线汇率转换，用json解析数据，支持偏好设置。
默认启动Activity背景是一张图片,启动时后台加载汇率数据,加载成功后进入另一个与用户交互Activity 首先分析JsonParser代码 package com.example.zhaorun ...
C#json解析数据
C#JSON解析的反析化 JSON解析反解析需要的步骤如何解析http JSON解析反解析因为json解析在C#中比较繁琐,步骤比较多,而且在之前比赛的时候我也在网上找了很多资料,感觉都不是很适 ...
SpringBoot前端Ajax以JSON格式获取后台数据
最近在用Thymeleaf做一个项目,耳边总是飘过前后端分离的话语,不得不去了解一下,在Thymeleaf里如何获取后端的json串,这里进行详细的讲解一下(困扰了我好久/哭了) 首先我们需要一个Co ...

前端-Ajax和JSON解析数据

Ajax和JSON解析数据

前端-Ajax和JSON解析数据相关推荐

最新文章

热门文章