首页> 基础笔记 >JS/JQ基础学习 >Ajax Ajax
JavaScript-AJAX技术：加载json格式的数据
作者：小萝卜 2023-03-23 【 Ajax javascript 】 浏览 224
简介JavaScript-AJAX技术：加载json格式的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>AJAX实例</title>
</head>
<body>
<!-- html注释 -->
<h2>AJAX技术：加载json格式的数据</h2>
<button onclick="doAjax()">加载</button>
<div id="did" style="width:300px;border:1px solid #ddd;"></div>
<script type="text/javascript">
function doAjax(){
//1.创建xmlHttpRequest请求对象
var xmlhttp;
if(window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.初始化请求
xmlhttp.open("get","4.php",true);
//xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//3.执行发送
xmlhttp.send();
//4.设置回调函数
xmlhttp.onreadystatechange=function(){
//判断是否已经请求结束
if(xmlhttp.readyState==4){
//浏览器响应状态
if(xmlhttp.status==200){
//获取响应结果
var res = xmlhttp.responseText;
//将获取的json数据转成js识别的格式
eval("var list="+res+";");
//遍历输出
var info="<ul>";
for(var i=0;i<list.length;i++){
info+="<li>";
info+=list[i].name+":"+list[i].sex+":"+list[i].age;
info+="</li>";
}
info+="</ul>";
//将信息添加到div中
document.getElementById("did").innerHTML=info;
}else{
alert("请求失败！");
}
}
}
}
/*
//在js中定义数组
var a=[10,20,30];
//在js中定义对象，内有两个属性
var ob={"name":"zhangsan","age":20};
//alert(ob.name);
//alert(ob.age);
var str = '{"name":"zhangsan","age":20}';
eval("var stu="+str+";");
alert(stu.name);
alert(stu.age);
/*
var ob = new Object();
ob.name='zhangsna';
ob.age=20;
*/
</script>
</body>
</html>
<?php
//$data=array(10,20,30,50,40); //[10,20,30,50,40]
//$data= array("name"=>"张三","sex"=>"男","age"=>20);
//{"name":"\u5f20\u4e09","sex":"\u7537","age":20}
$data=array(
array("name"=>"张三","sex"=>"男","age"=>20),
array("name"=>"李四","sex"=>"女","age"=>22),
array("name"=>"王五","sex"=>"女","age"=>25),
array("name"=>"赵六","sex"=>"男","age"=>28),
);
echo json_encode($data);
很赞哦！ (0)
