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.客户端通 ...
随机推荐
- OpenCASCADE动画功能2
OpenCASCADE动画功能2 eryar@163.com OpenCASCADE是一个开发平台,主要提供三维曲面和实体建模.CAD数据交换及可视化等功能.OCCT最适用于开发三维建模CAD软件.加 ...
- java生成excel报表文件
此次简单的操作将数据从数据库导出生成excel报表以及将excel数据导入数据库 首先建立数据库的连接池: package jdbc; import java.io.FileInputStream; ...
- LOJ#3119 随机立方体
解:极大值至少为1.我们尝试把最大那个数的影响去掉. 最大那个数所在的一层(指一个三维十字架)都是不可能成为最大值的. 考虑容斥.我们试图求除了最大值以外至少有k个极大值的概率. 我们钦定某k个位置是 ...
- css的层叠性+继承性+优先级+权重
一.层叠性 1.含义 多种css样式叠加,浏览器处理冲突的能力. 2.原则 1>一般情况下,若出现冲突,会按照css的书写顺序,以最后的样式为准 2>样式不冲突,就不会层叠 二.css的继 ...
- Django项目：CRM(客户关系管理系统)--77--67PerfectCRM实现CRM课程出勤排名
# classtop_urls.py # ————————64PerfectCRM实现CRM课程排名详情———————— from django.conf.urls import url from b ...
- location.hash的不一样用法
除了可以当做锚点,定位到同name位置,location.hash还有两个用法. 平时开发都会用得到. 一:使js事件在浏览器中产生历史记录. 举个栗子: 我们在JS里面改变了页面的数据.样式等,比如 ...
- spring cloud深入学习(十)-----配置中心和消息总线（配置中心终结版）
如果需要客户端获取到最新的配置信息需要执行refresh,我们可以利用webhook的机制每次提交代码发送请求来刷新客户端,当客户端越来越多的时候,需要每个客户端都执行一遍,这种方案就不太适合了.使用 ...
- 新增对象Products 的流程说明
库内新增对象Products 的流程说明: 第一步: com.jeecms.cms.entity.assist.base下建立模型基础类,BaseCmsProducts.java com.jeecms ...
- PAT甲级——A1064 Complete Binary Search Tree
A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...
- day65-test
目录 一.点击事件控制标签颜色 二.实现点击次数,变换页面标签的颜色 三.周期性实现颜色的旋转变色 练习题 一.点击事件控制标签颜色 1.有 红.黄.蓝 三个按钮,以及一个200x200矩形框box, ...