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 ...
随机推荐
- html里 调整字间距
使用字与字的间距可设置letter-spacing属性实现,例如:1.p{letter-spacing:15px;}即表示<p>这是一段文字</p>标签里的文字间距为15px. ...
- Scala语法04 - 其他
- 忘记mysql或mariadb数据库的密码之解决方案
一.实验环境 CentOS Linux release 7.5.1804 (Core) mysql Ver 15.1 Distrib 5.5.56-MariaDB, for Linux (x86_6 ...
- javascrip参考资料
阮一峰: http://javascript.ruanyifeng.com/ 廖雪峰: https://www.liaoxuefeng.com/ Mozila: https://developer.m ...
- Mac运行React Native安卓项目报错解决
传送门参考: 下面的这个链接很详细了,一步一步就好.... https://github.com/NARUTOyuyang/React-Native 然而在运行react-native run-and ...
- python基础知识（函数2）
返回值 return return[value] 多个值用,逗号分开,没有返回值,会返回none值,函数不给指定返回值也会返回none值 def functionname(p1,p2,p3): re ...
- Django：（03）请求和响应
一.HttpRequest 客户端传参的几种方式 传递方式 示例 后端获取方式 数据类型 url路径(path) /news/1/2 正则匹配 str 查询字符串 /news2?category=1& ...
- eclipse上新建Maven项目报错及解决
Could not calculate build plan: Plugin org.apache.maven.plugins:maven-resources-plugin:2.6 or one of ...
- APP安全_Android反编译
反编译 Android的反编译工具:apktool,JEB等. Apk 文件的结构,如下: META-INF:签名文件 res:资源文件,里面的 xml 格式文件在编译过程中由文本格式转化为二进制的 ...
- Java学习笔记-网络编程
Java提供了网络编程,并且在实际中有着大量运用 网络编程 网络编程概述 网络模型 OSI参考模型 TCP/IP参考模型 网络通讯要素 IP地址 端口号 传输协议 网络参考模型 网络通讯要素 IP地址 ...