一.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.客户端通 ...
随机推荐
-
weui 问题
1.阻止checkbox 被 checked 方法1: $('.weui-check').on('click', function(e){ $(this).attr('disabled', true) ...
-
打开网页自动弹出qq客户端
新建js后调用即可,打开网站自动弹出qq对话框,若qq为关闭状态则启动qq,之后弹出对话框. document.write("<iframe src='tencent://messag ...
-
Java中的I/O流
import java.io.*//生成代表输入流的对象fis=new FileInputStream("e:/src/from.txt") //生成代表输出流的对象 fos=ne ...
-
当xcode里点运行出现treating unicode character as whites
可能是由于粘贴网页上的代码的时候两行之间的回车引起的,两行之间重新输入回车就行......删掉重新写一遍就ok了 引入网页上的回车时 可能 网页对其格式做了处理,所以Xcode 不认识了
-
QTDesigner的QVBoxLayout自动随窗口拉伸
在MainWindow的构造函数中添加如下代码://设置Uiui.setupUi(this); //使Ui可自适应父窗口大小QVBoxLayout* mainLayout = new QVBoxLay ...
-
一个ASP.NET Web API 2.0应用
在一个空ASP.NET Web项目上创建一个ASP.NET Web API 2.0应用 由于ASP.NET Web API具有与ASP.NET MVC类似的编程方式,再加上目前市面上专门介绍ASP.N ...
-
IDEA升级版本后界面出现变小，字体变细的问题解决
笔者在今天升级了最新版本的IDEA 2019后发现,该版本的IDEA出现了非常诡异的事情如下图: 升级版本后字体居然发生了变化(通过官方导入的我自己的settings文件)还是出现了问题. 问题解决方 ...
-
linux添加本地yum源
增加一块硬盘 然后格式化成btrfs格式的文件 mkfs.btrfs /dev/sde 永久挂载 echo "/dev/sde /mnt btrfs defaults 0 0" & ...
-
（十）操作数据库、xlrd、xlwt补充
一.补充操作数据库: 1.建立游标时,指定返回的类型是字典 cur = coon.cursor(cursor=pymysql.cursors.DictCursor) 2.cur.fetchall() ...
-
5 Http请求中文乱码处理
java 乱码分很多种,这里主要研究解决http请求中出现乱码的情况. http请求出现中文乱码的主要原因:发送方与接收方编码不一致,服务器默认支持的编码与web应用不一致,如:tomcat 是国外程 ...