通过json传数据

最新推荐文章于 2024-08-07 18:11:48 发布

zuo_zuo_blog

最新推荐文章于 2024-08-07 18:11:48 发布

阅读量776

点赞数

分类专栏： Ajax PHP

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/90608173

版权

Ajax 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

PHP

10 篇文章 1 订阅

订阅专栏

是一种格式，是字符串，基本上所有语言都有json字符串转化为该语言对象的语法。
如果要变成js对象必须调用一个方法，调用json的parse方法将json形式的字符串转化成对应的js对象var jsObj=JSON.parse(str);

HTML

  <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		table{
    			margin: 100px auto;
    			
    		}
    		td{
    			border: 1px solid #0094ff;
    		}
    	</style>
    </head>
    <body>
    	<h1>获取明星</h1>
    	<input type="button" value="获取明星" id="getStars">
    </body>
    </html>
    <script type="text/javascript">
    	document.querySelector("#getStars").onclick=function(){
    		var ajax=new XMLHttpRequest();
    		ajax.open('post','03.getStars.php');
    		ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    		ajax.send();
    		ajax.onreadystatechange=function(){
    			if(ajax.readyState==4&&ajax.status==200){
    				console.log(ajax.responseText);
    
    				var jsArr=JSON.parse(ajax.responseText);
    				console.log(jsArr);
    
    				var str='';
    
    				str+='<table>';
    
    				for(var i=0;i<jsArr.length;i++){
    					var currentStar=jsArr[i];
    
    					str+='<tr>';
    					str+='<td>'+currentStar.name+'</td>';
    					str+='<td>'+currentStar.skill+'</td>';
    					str+='<td><img src="'+currentStar.path+'"></td>';
    					str+='</tr>';
    
    				}
    
    				str+='</table>';
    				console.log(str);
    			document.body.innerHTML=str;
    
    			}
    		}
    	}
    </script>

后台

<?php 
	// 读取并返回
	echo file_get_contents('info/stars.json');
 ?>
 [
	{
		"name":"小丹丹",
		"skill":"money",
		"path":"images/nvshen.jpg"
	},
	{
		"name":"贾玲",
		"skill":"laugh",
		"path":"images/jl.jpg"
	},
	{
		"name":"刘涛",
		"skill":"美美哒",
		"path":"images/lt.jpg"
	}
]