Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面
一.JQuery+Ajax用get、post方式提交和请求数据
知识要点：
$('#userName').blur(function () {
var txt = $(this).val();
$.ajax({
type:'GET', // 默认是get
url:'01_JQ_AJAX_get.php',
data:{
userName : txt
},
success : function (res) {
$('#tips').html(res);
},
error:function (res) {
$('#tips').html(res.statusText);
console.log('error',res);
} ,
// 完成时候的回调函数,不管成功还是失败都会执行的回调函数
complete:function (res) {
console.log('complete',res);
}
});
});
$('#userName').blur(function () {
// $.get("01_JQ_AJAX_step.php",function (res) {
// $("#tips").html( res );
// });
// var txt = $(this).val();
// $.post("03_JQ_AJAX_post.php",{ userName:txt },function (res) {
// $("#tips").html( res );
// });
});
1.GET方式请求提交数据
客户端: JQ_AJAX_get.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tips{
color:red;
}
</style>
</head>
<body>
<form action="01_register.php" method="get">
<p class="tips" id="tips"></p>
用户名<input type="text" name="userName" id="userName"/>
密码<input type="password" name="userPwd" id="userPwd"/>
<input type="submit" value="登录">
</form>
</body>
</html>
<script src="lib/jquery-1.12.2.js"></script>
<script>
$('#userName').blur(function () {
/**
* $.ajax({});
* url 服务器地址
* */
var txt = $(this).val();
$.ajax({
type:'GET',
url:'JQ_AJAX_get.php',
data:{
userName : txt
},
success : function (res) {
$('#tips').html(res);
}
});
});
</script>
服务器: JQ_AJAX.php
<?php
/**
* Created by qinpeizhou.
* Date: 2017/11/10
* Time: 15:03
* Email : 1031219129@qq.com
*/
header('Content-Type:text/html;charset=utf-8;');
// echo 'Success，你成功的从PHP服务器拿到了数据';
$uName = $_GET['userName'];
$users = ["jack",'rose','tom'];
$isExist = in_array($uName,$users);
if($isExist) {
echo "该帐号已注册，换一个试试";
}else{
echo "你可以注册";
}
2.POST方式请求提交数据
客户端： JQ_AJAX_post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tips{
color:red;
}
</style>
</head>
<body>
<form action="01_register.php" method="get">
<p class="tips" id="tips"></p>
用户名<input type="text" name="userName" id="userName"/>
密码<input type="password" name="userPwd" id="userPwd"/>
<input type="submit" value="登录">
</form>
</body>
</html>
<script src="lib/jquery-1.12.2.js"></script>
<script>
$('#userName').blur(function () {
/**
* $.ajax({});
* url 服务器地址
* type: 请求类型
* */
var txt = $(this).val();
$.ajax({
type:'POST',
url:'JQ_AJAX_post.php',
data:{
userName : txt
},
success : function (res) {
$('#tips').html(res);
}
});
});
</script>
服务器端:JQ_AJAX_post
<?php
/**
* Created by qinpeizhou.
* Date: 2017/11/10
* Time: 15:03
* Email : 1031219129@qq.com
*/
header('Content-Type:text/html;charset=utf-8;');
// echo 'Success，你成功的从PHP服务器拿到了数据';
$uName = $_POST['userName'];
$users = ["jack",'rose','tom'];
$isExist = in_array($uName,$users);
if($isExist) {
echo "该帐号已注册，换一个试试";
}else{
echo "你可以注册";
}
二.JQuery+Ajax解析Json、XML数据
1.解析Json数据：
nav.json
[
{
"link":"http://www.jd.com",
"src":"images/nav_1.png",
"text":"京东超市"
},
{
"link":"http://www.taobao.com",
"src":"images/nav_2.png",
"text":"全球购"
},
{
"link":"http://www.mi.com",
"src":"images/nav_3.png",
"text":"服装城"
},
{
"link":"http://www.163.com",
"src":"images/nav_4.png",
"text":"京东生鲜"
} ]
客户端：nav_json.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav{
border: 1px solid #ddd;
}
.nav li {
float: left;
width: 200px;
text-align: center;
}
.nav li a{
text-decoration: none;
}
</style>
</head>
<body>
<button id="btn">无刷新请求</button>
<div class="nav">
<ul id="navIn"> </ul>
</div>
</body>
</html>
<script src="lib/jquery-1.12.2.js"></script>
<script> /**
* $.ajax({});
* url 服务器地址
* dataType:
* type: 请求类型
* success :function(){
* 请求成功点后执行的函数
* }
* */
$('#btn').click(function () {
$.ajax({
url:'nav_json.php',
dataType:'json',
success:function (res) {
console.log(res);
var htmlStr = '';
$.each(res,function (index,item) {
htmlStr += " <li>" +
"<a href="+item.link+">" +
"<img src="+item.src+" alt=''> " +
"<p>"+item.text+"</p>" +
"</a><" +
"/li>"
});
$('.nav ul').html(htmlStr);
}
});
}); </script>
服务端:nav_json.php
<?php
/**
* Created by qinpeizhou.
* Date: 2017/11/10
* Time: 16:52
* Email : 1031219129@qq.com
*/
header('Content-Type:text/html;charset=utf-8;');
$jsonStr = file_get_contents('nav.json');
echo $jsonStr;
2.解析XML数据：
nav.xml
<?xml version="1.0" encoding="UTF-8" ?>
<array>
<item>
<link>http://www.jd.com</link>
<src>images/nav_1.png</src>
<text>京东超市</text>
</item>
<item>
<link>http://www.taobao.com</link>
<src>images/nav_2.png</src>
<text>全球购</text>
</item>
<item>
<link>http://www.mi.com</link>
<src>images/nav_3.png</src>
<text>服装城</text>
</item>
<item>
<link>http://www.163.com</link>
<src>images/nav_4.png</src>
<text>京东生鲜</text>
</item>
</array>
客户端：nav_XML.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav{
border: 1px solid #ddd;
}
.nav li {
float: left;
width: 200px;
text-align: center;
}
.nav li a{
text-decoration: none;
}
</style>
</head>
<body>
<button id="btn">无刷新请求</button>
<div class="nav">
<ul id="navIn"> </ul>
</div>
</body>
</html>
<script src="lib/jquery-1.12.2.js"></script>
<script> /**
* $.ajax({});
* url 服务器地址
* dataType:
* type: 请求类型
* success :function(){
* 请求成功点后执行的函数
* }
* */
$('#btn').click(function () {
$.ajax({
url:'nav_XML.php',
dataType:'xml',
success:function (res) {
console.log(res);
var item = res.children[0].children;
var htmlStr = '';
for (var i = 0; i < item.length; i++) {
htmlStr += '<li>\n' +
' <a href="'+$(item[i]).find('link').text()+'">\n' +
' <img src="'+$(item[i]).find('src').text()+'" alt="">\n' +
' <p>'+$(item[i]).find('text').text()+'</p>\n' +
' </a>\n' +
'</li>';
}
$('.nav ul').html(htmlStr);
}
});
}); </script>
服务端：nav_XML.php
<?php
/**
* Created by qinpeizhou.
* Date: 2017/11/10
* Time: 16:52
* Email : 1031219129@qq.com
*/
header('Content-Type:text/html;charset=utf-8;');
$jsonStr = file_get_contents('nav.xml');
echo $jsonStr;
三.jQuery+Ajax 加载页面
1.加载没有js生成Dom元素节点的页面：
被加载页面 没带js加载数据的： HTML_page_nojs.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav {
border: 1px solid #ddd;
overflow: hidden;
}
.nav li{
float: left;
width: 100px;
text-align: center;
}
.nav li a{
text-decoration: none;
}
</style>
</head>
<body>
<button>无刷新请求</button>
<div class="nav">
<ul>
<li>
<a href="chaoshi.html">
<img src="data:images/nav_1.png" alt="">
<p>京东超市</p>
</a>
</li>
<li>
<a href="chaoshi.html">
<img src="data:images/nav_2.png" alt="">
<p>京东超市</p>
</a>
</li>
<li>
<a href="chaoshi.html">
<img src="data:images/nav_3.png" alt="">
<p>京东超市</p>
</a>
</li>
<li>
<a href="chaoshi.html">
<img src="data:images/nav_4.png" alt="">
<p>京东超市</p>
</a>
</li>
</ul>
</div>
</body>
</html>
<script> </script>
加载方式： load.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav{
border: 1px solid #ddd;
}
.nav li {
float: left;
width: 200px;
text-align: center;
}
.nav li a{
text-decoration: none;
}
</style>
</head>
<body>
<button id="btn">无刷新请求</button>
<div class="nav"> </div>
</body>
</html>
<script src="lib/jquery-1.12.2.js"></script>
<script> /**
* $.ajax({});
* url 服务器地址
* dataType:
* type: 请求类型
* success :function(){
* 请求成功点后执行的函数
* }
* */
$('#btn').click(function () {
$('.nav').load('HTML_page_nojs.html .nav ul');
// $(实例JQ对象).load('要加载的页面 页面的某个模块');
}); </script>
2.加载有js生成Dom元素节点的页面：
被加载的页面：HTML_page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav{
border: 1px solid #ddd;
}
.nav li {
float: left;
width: 200px;
text-align: center;
}
.nav li a{
text-decoration: none;
}
</style>
</head>
<body>
<button id="btn">无刷新请求</button>
<div class="nav">
<ul id="navIn"> </ul>
</div>
</body>
</html>
<script src="lib/jquery-1.12.2.js"></script>
<script> /**
* $.ajax({});
* url 服务器地址
* dataType:
* type: 请求类型
* success :function(){
* 请求成功点后执行的函数
* }
* */
// $('#btn').click(function () {
$.ajax({
url:'nav_json.php',
dataType:'json',
success:function (res) {
console.log(res);
var htmlStr = '';
$.each(res,function (index,item) {
htmlStr += " <li>" +
"<a href="+item.link+">" +
"<img src="+item.src+" alt=''> " +
"<p>"+item.text+"</p>" +
"</a><" +
"/li>"
});
$('.nav ul').html(htmlStr);
}
});
// }); </script>
load.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav{
border: 1px solid #ddd;
}
.nav li {
float: left;
width: 200px;
text-align: center;
}
.nav li a{
text-decoration: none;
}
</style>
</head>
<body>
<button id="btn">无刷新请求</button>
<div class="nav"> </div>
</body>
</html>
<script src="lib/jquery-1.12.2.js"></script>
<script> /**
* $.ajax({});
* url 服务器地址
* dataType:
* type: 请求类型
* success :function(){
* 请求成功点后执行的函数
* }
* */
$('#btn').click(function () {
// $('.nav').load('07_HTML_page.html');
// $(实例JQ对象).load('要加载的页面');
}); </script>
Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面的更多相关文章
- jquery easyui 显示和关闭数据加载的遮罩
$('#yearReportTable').datagrid('loading');//打开等待div $('#yearReportTable').datagrid('loaded');//关闭等待d ...
- MPP 二、Greenplum数据加载
Loading external data into greenplum database table using different ways... Greenplum 有常规的COPY加载方法,有 ...
- jquery加载页面的方法
jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){ $("#a&q ...
- jquery加载页面的方法(页面加载完成就执行)
jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){ $("#a&qu ...
- 关于IE8中使用Jquery load方法无法正常加载页面
最近发现,在IE8中使用Jquery load方法时无法正常加载页面,页面显示空白,没有加载.调试发现,页面多了一个</div>标签,但在FF和CH下表现正常.希望能给遇到同样问题的码农有 ...
- [转]jquery加载页面的方法(页面加载完成就执行)
jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){ $("#a&q ...
- Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
实际项目中遇到的需求 同一个链接需要加载不同的页面组件.根据用户所购买服务的不同,有不同的页面展现. 有一些不好的实现方式 直接把这几个组件写在同一个组件下,通过v-if去判断.如果这么做的话,甚至可 ...
- Jquery解析Json格式数据
今天稍微学习了一下Json,JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. JSON采用完全独立于语言的 ...
- Echarts通过Ajax实现动态数据加载
Echarts(3.x版)官网实例的数据都是静态的,实际使用中往往会要求从服务器端取数据进行动态显示,官网教程里给出的异步数据加载很粗略,下面就以官网最简单的实例为例子,详细演示如下过程:1.客户端通 ...
随机推荐
- <scrapy爬虫>基本知识-修改链接-中间件
rules = ( Rule(LinkExtractor(allow=r'/films/\d+'),process_links='deal_links' ,callback='parse_maoyan ...
- 基于neighborhood models(item-based) 的个性化推荐系统
文章主要介绍的是koren 08年发的论文[1], 2.2neighborhood models部分内容(其余部分会陆续补充上来). koren论文中用到netflix 数据集, 过于大, 在普通的 ...
- 论文翻译—SPP-Net（目标检测）
SPPNet论文翻译 <Spatial Pyramid Pooling in Deep Convolutional Networks for Visual Recognition> Kai ...
- UDP和TCP的区别？
区别总结: 1.TCP面向连接,UDP的面向无连接的,即发送数据之前不需要建立简介. 2.TCP提供可靠的数据传输,有发送应答机制,超时重传机制,错误校验机制,流量控制机制保证传输的安全,不丢失,不重 ...
- PHP 类与对象 全解析方法
1.类与对象 对象:实际存在该类事物中每个实物的个体.$a =new User(); 实例化后的$a 引用�php的别名,两个不同的变量名字指向相同的内容 封装: 把对象的属性和方法组织在一个类(逻辑 ...
- 使用由 Python 编写的 lxml 实现高性能 XML 解析
lxml 简介 Python 从来不出现 XML 库短缺的情况.从 2.0 版本开始,它就附带了 xml.dom.minidom 和相关的 pulldom 以及 Simple API for XML ...
- python 获取公网 ip
from urllib2 import urlopen my_ip = urlopen('http://ip.42.pl/raw').read() print 'ip.42.pl', my_ip fr ...
- JS中apply和call的联系和区别
以下内容翻译自stackoverflow 链接: http://stackoverflow.com/questions/7238962/function-apply-not-using-thisarg ...
- Python的格式化输出--制作名片
效果图 代码如下: name = input("Your name:")age = int(input("Your age:"))job = input(&qu ...
- ConnectionString连接字符串-密码丢失的解决方法
今天遇到一个问题,EF,asp.net web端登录成功,退出,再登录就异常了, 登出成功时, EF 中 dbcontext.Database.Connection.ConnectionString ...