作者：飞松安步当车9_U | 来源：互联网 | 2023-06-08 12:23
js进阶ajax读取json数据（ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可）一、总结ajax读取json和读取普通文本，
js进阶ajax读取json数据（ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可）
一、总结
ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可
var lii=document.createElement('li'); //3、dom动态创建元素document.createElement
div1.appendChild(lii) //4、dom动态给元素添加孩子
var obj=JSON.parse(str) //2、解析json：将json从字符串转化为数组或对象
二、js进阶ajax读取json数据
json中数据：
1 [
2 {
3 "name":"张三",
4 "id":123456,
5 "sex":"男",
6 "VIP":"lv1"
7 },
8 {
9 "name":"李四",
10 "id":123457,
11 "sex":"男",
12 "VIP":"lv3"
13 },
14 {
15 "name":"李丽",
16 "id":123458,
17 "sex":"女",
18 "VIP":"lv2"
19 }
20 ]
html代码
1 DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>ajax01title>
6 <style type="text/css">
7 div{
8 background: rgba(30,100,30,0.3);
9 width: 500px;
10 height: 500px;
11 letter-spacing: 5px;
12 padding: 5px
13 }
14
15 style>
16 <script type="text/Javascript" src="ajax1.js">script>
17 head>
18 <body>
19 <input type="button" id="btn" value="测试按钮">
20 <div id="div1">div>
21 <script>
22 var btn=document.getElementById('btn');
23 var div1=document.getElementById('div1');
24 btn.onclick=function (){
25 ajax('data.json',function(str){ //1、ajax读取json和读取普通文本，和读取链接都是一样的，在url处放上json文件的地址即可 26 var obj=JSON.parse(str) //2、解析json：将json从字符串转化为数组或对象 27 //alert(typeof obj)
28 for(var i in obj){
29 for(var j in obj[i]){
30 // div1.innerHTML+=j+':'+obj[i][j]+'
';
31 var lii=document.createElement('li'); //3、dom动态创建元素document.createElement 32 lii.innerHTML=j+':'+obj[i][j];
33 div1.appendChild(lii) //4、dom动态给元素添加孩子 34 }
35
36 }
37
38 },function(s){
39 alert(s)
40 })
41 }
42 script>
43 body>
44 html>
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有