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 ...
随机推荐
- js获取后台传给前台的值
1.后台传给前台的方法 String rulemodeid=req.getParameter("rulemodeid"); req.setAttribute("rulem ...
- 批量执行（Linux命令，上传/下载文件）
前言: 每个公司的网络环境大都划分 办公网络.线上网络,之所以划分的主要原因是为了保证线上操作安全: 对于外部用户而言也只能访问线上网络的特定开放端口,那么是什么控制了用户访问线上网络的呢? 防火墙过 ...
- rally task配置文件
rally task配置文件 Rally本身提供了一些task配置文件,用于提供测试用例中所需的信息包括场景测试中所传入的参数.运行方式是并行还是串行,context等信息.Rally本身提供的tas ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-8.用户模块开发之保存微信用户信息
笔记 8.用户模块开发之保存微信用户信息 简介:开发User数据访问层,保存微信用户信息 问题: 微信回调 用户昵称乱码 解决: ...
- Vue.js父子组件如何传值 通俗易懂
父子组件传值原理图 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建pr ...
- presto安装
下载 presto-server-0.217 包 进入presto根目录,新建脚本deploy.sh mkdir etc cd etc #配置 cat >config.properties &l ...
- sizeof和strlen函数区别
一.sizeof sizeof(...)是运算符,在头文件中typedef为unsigned int,其值在编译时即计算好了,参数可以是数组.指针.类型.对象.函数等. 它的功能是:获得保 ...
- Java集合(6)：理解Map
映射表的基本思想是维护键-值对的关联,通过键来寻找值.下面是标准Java类库中几种Map的实现: (1) HashMap:Map基于散列表的实现,插入和查询键值对的开销是固定的.可以通过构造器设置容量 ...
- MariaDB基本知识点总结01--介绍+语句
一.概念 1.数据库介绍: 简单的说,数据库就是一个存放数据的仓库,这个仓库是按照一定的数据结构(数据结构是指数据的组织形式或数据之间的联系)来组织,存储的,我们可以通过数据库提供的多种方法来管理数据 ...
- Kubernetes 相关镜像pull 不下来问题收集
1. 可在相关的镜像前添加 keveon 或者 mirrorgooglecontainers 就可以下载镜像, 然后在修改 tag docker pull mirrorgooglecontainers ...