ajax.完整案例
Posted 细心精心玉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax.完整案例相关的知识，希望对你有一定的参考价值。
php写法
<?php
$id = $_GET[‘id‘];
if($id==1){
$arr[‘name‘] = "三只松鼠";
$arr[‘money‘] = 100;
$arr[‘guige‘] = "3袋装";
$arr["love"] = 1;
$arr["srcc"]="img7_03.png";
echo json_encode($arr);
}else {
$arr = "请输入id";
}
?>
<!DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="" id="box">
<img src="" alt="" />
<p class="p1">姓名</p>
<p class="p2">钱</p>
<p class="p3">规格</p>
<p class="p4">爱</p>
<button>点击按钮</button>
<a href=""></a>
</div>
</body>
<script type="text/javascript">
var p1=document.querySelector(".p1");
var p2=document.querySelector(".p2");
var p3=document.querySelector(".p3");
var p4=document.querySelector(".p4");
var btn=document.querySelector("button");
var imgs=document.querySelector("img");
var ap=document.querySelector("a");
//做兼容处理。创建新的对象 http://www.jb51.net/article/23175.htm
if(window.XMLHttpRequest){
//创建新的对象
var ajax = new XMLHttpRequest();
}else{
var ajax = new ActiveXObject();
}
btn.onclick=function(){
//打开，用什么方式获取， 文件有id写id，同步还是异步
ajax.open("GET","new_file.php?id=1",true);
ajax.send(); /*发送数据*/
/*ajax,当事件改变时当请求被发送到服务器时，我们需要执行一些基于响应的任务。*/
ajax.onreadystatechange = function(){
if(ajax.readyState==4){
每当 readyState 改变时，就会触发 onreadystatechange 事件。
if(ajax.status==200){
//获取它的对象进行转换成整数*/
var obj=JSON.parse(ajax.responseText);
p1.innerHTML="姓名"+obj.name;
p2.innerHTML="钱"+obj.money;
p3.innerHTML="规格"+obj.guige;
p4.innerHTML="爱"+obj.love;
/*点的形式进行获取打印对象*/
imgs.src=obj.srcc;
/*a.href=obj.html;*/
/*点的形式进行获取打印对象*/
}
}
}
}
</script>
</html>
以上是关于ajax.完整案例的主要内容，如果未能解决你的问题，请参考以下文章