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 ...
随机推荐
- Java注解(Annotation)详解
转: Java注解(Annotation)详解 幻海流心 2018.05.23 15:20 字数 1775 阅读 380评论 0喜欢 1 Java注解(Annotation)详解 1.Annotati ...
- 适用于hips ui的iPhoneX及以上适配方案
版本信息: hips ui: 0.1.43 须知: 随着hips ui的迭代,可能会解决适配问题,所以下面的方案是有时效性的. 如果你项目上很紧急,可以直接看第三部分解决方案,复制粘贴代码即可. 一. ...
- Docker监控：最佳实践以及cAdvisor和Prometheus监控工具的对比
在DockerCon EU 2015上,Brian Christner阐述了“Docker监控”的概况,分享了这方面的最佳实践和Docker stats API的指南,并对比了三个流行的监控方案:cA ...
- JAVA 基础编程练习题6 【程序 6 求最大公约数及最小公倍数】
6 [程序 6 求最大公约数及最小公倍数] 题目:输入两个正整数 m 和 n,求其最大公约数和最小公倍数. 程序分析:利用辗除法. package cskaoyan; public class csk ...
- JAVA 基础编程练习题3 【程序 3 水仙花数】
3 [程序 3 水仙花数] 题目:打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身.例 如:153 是一个"水仙 ...
- SQL中group by后面的having中不能使用别名
如下图中,SQL中需要对group by的结果使用having进行过滤,不能使用select中定义的别名,需要使用查询字段的原始名.否则会报错,列明未定义. 下图未错误演示: 修改后,正确的SQL语句 ...
- python字典操作+文件操作+函数
师从百测besttest今天老牛教了些函数调用的知识,布置了个作业如下: # 1.写一个商品管理的小程序# 2.商品存在文件里面# 1.添加商品# 输入产品名称.颜色.价格# 要校验商品是否存在,价格 ...
- Leetcode之101. Symmetric Tree Easy
Leetcode 101. Symmetric Tree Easy Given a binary tree, check whether it is a mirror of itself (ie, s ...
- 解决windows server 2019远程桌面许可证问题
解决远程桌面许可证问题,你的远程桌面许可证出现问题,你的会话将在60分钟后断开. 最近装了台windows server 2019服务器做远程桌面连接,也安装了远程桌面许可证,但客户端远程连接时出现你 ...
- C学习笔记-数组
数组的概念 数组是一组具有相同数据类型的变量集合,这里要注意两点,数组只能存储相同的数据类型和数组的内存是连续的,这位数组和指针的联系奠定了基础. 一维数组 定义及初始化 一维数组指的是只有一个下标的 ...