Ajax与JSON，XML，PHP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding:0;
margin: 0;
}
div{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 50px auto;
text-align: center;
background: #e6e6e6;
}
img{
width: 200px;
height: 200px;
display: block;
margin: 10px auto 10px;
border: 1px solid black;
}
p{
text-align: center;
background-color:#fff; }
</style>
<script src="myAjax.js"></script>
<script>
window.onload = function (ev) {
var oTitle = document.querySelector("#title");
var oDes = document.querySelector("#des");
var oImg = document.querySelector("img"); var oBtns = document.querySelectorAll("button"); oBtns[0].onclick = function () {
var self = this;
ajax({
type:"get",
url:"ajax-test1.php",
data:{
"name":this.getAttribute("name")
},
timeout:5000,
success:function (xhr) {
/*向ajax后台的程序发送xmlhttp请求的时候, 后台程序接到请求会进行处理,处理结束后,可以返回一串数据给前台,
这个就是responseText.
*/
var res = xhr.responseText.split("|");
oTitle.innerHTML = res[0];
oDes.innerHTML = res[1];
oImg.setAttribute("src",res[2]);
},
error:function (xhr) {
alert(xhr.status);
}
});
}
oBtns[1].onclick = function () {
var self = this;
ajax({
type: "get",
url: "ajax-test2.php",
data: {
"name": this.getAttribute("name")
},
timeout: 5000,
success: function (xhr) { var name = self.getAttribute("name");
var res = xhr.responseXML; var title = res.querySelector(name + ">title").innerHTML;
var des = res.querySelector(name + ">des").innerHTML;
var image = res.querySelector(name + ">image").innerHTML; oTitle.innerHTML = title;
oDes.innerHTML = des;
oImg.setAttribute("src", image);},
error:function (xhr) {
alert(xhr.status);
}
}); }
oBtns[2].onclick = function () {
var self = this;
ajax({
type:"get",
url:"ajax-test3.php",
data:{
"name":this.getAttribute("name")
},
timeout:5000,
success:function (xhr) { var str = xhr.responseText;
var obj = JSON.parse(str);
var name = obj.tx;
oTitle.innerHTML = name.title;
oDes.innerHTML = name.des;
oImg.setAttribute("src",name.image); },
error:function (xhr) {
alert(xhr.status);
}
});
};
}
</script>
</head>
<body>
<div>
<p id="title">拜仁球星</p>
<img src="" alt="">
<p id="des">球星介绍</p>
<button name="nz">莱万</button>
<button name="bb">基米西</button>
<button name="tx">罗本</button></div>
</body>
</html>
ajax-test1.php
<?php
//1.定义字典保存商品信息
$products = array("nz"=>array("title"=>"莱万","des"=>"最佳射手","image"=>"../images/1.jpg"),
"bb"=>array("title"=>"基米西","des"=>"鸡哥最可爱","image"=>"../images/2.jpg"),
"tx"=>array("title"=>"罗本","des"=>"小飞侠","image"=>"../images/3.jpg"));
//2.获取前端传递的参数$_GET
$name = $_GET["name"];
//echo $name;
//3.根据前端传入的key,获取对应的字典
$product = $products[$name];
//print_r($product);
//4.将内容取出来，返回给前端
echo $product["title"];
echo "|";
echo $product["des"];
echo "|";
echo $product["image"];
ajax-test2.php
<?php
//执行结果中有中文，必须在PHP文件顶部设置
header("content-type:text/html;charset=utf-8");
//如果PHP中需要返回XML数据，也必须在PHP文件顶部设置
header("content-type:text/xml;charset=utf-8");
echo file_get_contents("ajax-test.xml");
?>
ajax-test.xml
<?xml version="1.0" encoding="UTF-8" ?>
<products>
<nz>
<title>莱万</title>
<des>最佳射手</des>
<image>../images/1.jpg</image>
</nz>
<bb><title>基米西</title>
<des>可爱</des>
<image>../images/2.jpg</image></bb>
<tx><title>罗本</title>
<des>小飞侠</des>
<image>../images/3.jpg</image></tx>
</products>
ajax-test3.php
<?php echo file_get_contents("ajax-test.txt"); ?>
ajax-test.txt
{
"nz":{
"title":"莱万",
"des":"最佳射手",
"image":"../images/1.jpg"},
"bb":{"title":"基米西",
"des":"可爱",
"image":"../images/2.jpg"},
"tx":{"title":"阿尔杨-罗本",
"des":"小飞侠",
"image":"../images/3.jpg"}
}
Ajax与JSON，XML，PHP的更多相关文章
- Ajax返回类型JSON,XML
Ajax的三种返回类型 **一.TEXT *二.JSON 数据显示页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...
- 调用AJAX返回JSON、XML数据类型
1.调用AJAX返回JSON数据 用下拉列表显示Nation表民族名称 主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...
- javascript 解析ajax返回的xml和json格式的数据
写个例子,以备后用 一.JavaScript 解析返回的xml格式的数据: 1.javascript版本的ajax发送请求 (1).创建XMLHttpRequest对象,这个对象就是ajax请求的核心 ...
- Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面
一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...
- 跟阿根一起学Java Web开发二：使用Ajax技术及XML与JSON实现输出
如今B/S结构的系统使用Ajax技术是再平常只是的了.今天我们就来探讨下在JSPGenSDF第四版中:怎样使用Ajax技术.怎样输出XML文件及JSON格式数据输出. 怎样搭建一个最基础的JSPGen ...
- 让我们喝喝下午茶，聊聊AJAX和JSON
1.AJAX [1] AJAX简介 > 全称:Asynchronous JavaScript And XML > 直译:异步的JavaScript和 ...
- Ajax与Json的一些总结
Ajax与Json AJAX=异步javaScript 和XML AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不 ...
- 通过Jquery中Ajax获取json文件数据
1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...
- ThinkPHP中使用ajax接收json数据的方法
本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先 ...
- MyEclipse下Struts2配置使用和Ajax、JSON的配合
原创文章,转载请注明:MyEclipse下Struts2配置使用和Ajax.JSON的配合 By Lucio.Yang 新手,初学Struts2的配置,同时尝试与Ajax通过JSON交互.首先介绍M ...
随机推荐
- git send-email时报错:Client host rejected: cannot find your hostname 如何处理?
1. 先找出ip对应的域名 dig +short -x <your ip> 2. 如果第1步没有输出,那么需要将hostname与ip绑定,如:hostname为jello,那么是往/et ...
- vue-cli 构建的项目 webpack 如何配置不 build 出 .map 文件？
build命令后占体积最大的竟然是.map文件,webpack如何设置不让编译出.map文件呢?
- linux简单命令9--yum安装软件
+
- 大数据HIve
1. 题目说明 设计题:MySQL数据库A有1000w条数据,完成统计再输入到另外的B表中 A表 test1 0.2,3.5,1,1test1 1.2,2.3,4.56test2 2.1,0.3,9. ...
- openstack核心组件--nova计算服务（3）
一.nova介绍: Nova 是 OpenStack 最核心的服务,负责维护和管理云环境的计算资源.OpenStack 作为 IaaS 的云操作系统,虚拟机生命周期管理也就是通过 Nova ...
- Performance Analysis of Logs (PAL) Tool
Performance Analysis of Logs (PAL) Tool 背景 在众多的独立项目中,我们如何快速了解数据库(SQL Server)服务器的性能,以及数据库的基线情况是怎样的,或者 ...
- ORACLE11G报错汇总
============安装类================= 安装Oracle 11g R2的过程中,在新建数据库实例时出现了该错误,如果选择"忽略"就会出现ora-28000 ...
- Docker的数据管理(volume/bind mount/tmpfs)
Docker提供了三种不同的方式用于将宿主的数据挂载到容器中:volumes,bind mounts,tmpfs volumes.当你不知道该选择哪种方式时,记住,volumes总是正确的选择. vo ...
- liunx 中如何删除export设置的环境变量
1,网上有资料说,export命令添加的环境变量,利用export -p 删除: 例如:export KUBECONFIG="/etc/kubernetes/admin.conf" ...
- vue定义global.js,挂载在vue原型上面使用
首先在src目录下创建global目录,在global目录下创建index.js. export default { install(Vue) { var that = this // 1. 添加全局 ...