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 ...
随机推荐
- 树莓派-为Ubuntu Mate更换国内源 [转]
更换步骤以root身份打开 /etc/apt/sources.list 将 http://ports.ubuntu.com/ 全部替换为中科大的源 http://mirrors.ustc.edu ...
- Java集合(0)：概述
下面是一个Java集合的简化图,我们可以看出,集合分Collection和Map两大部分: 接下来分别以下面几个章节介绍Java集合: Java集合(1):Collections工具类中的static ...
- C# 关于App.config
App.config是winfrom等程序的应用程序配置文件,用来存放一些参数. app.config只会在应用程序启动时加载一次. 当程序在运行中修改app.config中的参数是不会生效,必须要重 ...
- Quickcocos从安装到打包
Quick-Cocos2dx-Community 是跨平台的游戏引擎,支持时下流行的 Android 移动操作系统.本节将教大家如何在 Windows 上把已经开发好的游戏打包为 Android 上可 ...
- 配置nova服务使用ceph作为后端存储
在ceph监视器上执行 1.创建pool池 为nova服务创建pool池(因为我只有一个OSD节点,所以要将副本数设置为1) ceph osd pool create nova-vms 32 ceph ...
- Hyperledger Fabric1.4 网络环境搭建步骤
1. 外部访问虚拟机: 安装ssh apt-get install openssh-server openssh-client 2. 安装vim sudo apt install vim 3. ...
- idea的spring整合基于xml文件配置的mybatis报Invalid bound statement (not found): com.music.dao.MusicDao.findAll的问题
一. 题主当时就是自己尝试整合spring和mybatis的时候遇到了这个问题,当时题主只看到了用注解的方式配置的dao层,题主用的是xml文件配置的形式, 而且坑爹的是题主的两个文件的路径写的也不一 ...
- Design Phone Directory
Design a Phone Directory which supports the following operations: get: Provide a number which is not ...
- Oracle的基本操作-序列的使用
序列:默认从1开始,一次递增,主要用来给主键赋值使用 create sequence s_person; select s_person.nextval from dual; --dual是一张虚表, ...
- HDU-6704 K-th occurrence (后缀自动机father树上倍增建权值线段树合并)
layout: post title: HDU-6704 K-th occurrence (后缀自动机father树上倍增建权值线段树合并) author: "luowentaoaa&quo ...