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.客户端通 ...
随机推荐
- Java学习之一（引用相关）
1.Java概述 首先,Java是一门面向对象的编程语言.相对于C/C++等语言,Java中没有指针,但是这不代表指针等知识不重要:Java中不存在多继承但是存在多接口.在我自己的学习过程之中,我偏向 ...
- 07_Hibernate多事务并发运行时并发问题检索方式
什么是事务? 事务(Transaction)是并发控制的单位,是用户定义的一个操作序列.这些操作要么都做,要么都不做,是一个不可分割的工作单位. 事务就是逻辑上的一组操作,要么全都成功,要么全都失败 ...
- <爬虫>利用BeautifulSoup爬取百度百科虚拟人物资料存入Mysql数据库
网页情况: 代码: import requests from requests.exceptions import RequestException from bs4 import Beautiful ...
- 【LGP4705】玩游戏
题目 显然这个题的期望就是逗你玩的,我们算出来总贡献除以\(nm\)就好了 设\(ans_t=\sum_{i=1}^n\sum_{j=1}^n(a_i+b_j)^t\) 二项式定理展开一下 \[ans ...
- wpf textbox只能输入数字，屏蔽中文输入
1.设置textbox属性InputMethod.IsInputMethodEnabled="False" 2.增加KeyDown事件 private void TextBox_K ...
- 图像的K-L变换
1 问题的提出 2 K-L变换的原理 3 K-L变换的计算过程 4 K-L变换的性质 5 K-L变换的深入讨论 6 K-L变换的应用
- 安装sklearn的一点事故解决
安装sklearn过程出现挺多问题的.这里记录下一下问题点避免下次走弯路 1.安装ANACONDA,避免太多插件的手动安装,选用版本Anaconda3-4.3.1-Windows-x86_64.rar ...
- redis-cli启动问题
首先需要找到redis的所在目录,然后将redis.conf复制到/etc/redis.conf 另外需要将redis.conf文件中的 daemonize no 设置为 daemonize yes. ...
- 深入浅出 Java Concurrency (17): 并发容器 part 2 ConcurrentMap (2)[转]
本来想比较全面和深入的谈谈ConcurrentHashMap的,发现网上有很多对HashMap和ConcurrentHashMap分析的文章,因此本小节尽可能的分析其中的细节,少一点理论的东西,多谈谈 ...
- 科普 | 编译 V8 源码
2017-02-13 justjavac 象尘说 对于JavaScript程序员来说,可以瞧一瞧justjavac给大家写的科普类读物,V8引擎的分析,“也许你不懂C++”,但是你可以了解一下,总是好 ...