一.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>