jQuery AJAX应用实例总结


Posted in jQuery onMay 19, 2020

本文实例总结了jQuery AJAX应用。分享给大家供大家参考,具体如下:

AJAX

是指一种创建交互式网页应用的网页开发技术。

AJAX=异步JavaScript和XML(标准通用标记语言的子集)。

AJAX是一种用于创建快速动态网页的技术。

AJAX是一种在无需重新加载整个网页的情况下,能够更新部份网页的技术。

通过在后台与服务器进行少量数据交换,AJAX可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,也就是:按需更新。

AJAX解析纯文本数据

<script>
 $(document).ready(function() {
  //获取页面中所有a元素中的第一个,并添加点击事件
  document.getElementByTagName('a')[0].οnclick=function() {
   //1、获取XHR对象
   var request = new XMLHttpRequest();
   //2、配置AJAX请求参数:请求类型,请求的URL资源,请求方式,默认为true,即异步
   request.open('GET','URL',true);
   request.open('GET',this.href+'?'+(new Date()),true);//每次请求都是最新数据
   //3、将AJAX请求发送到服务器,GET请求不需要参数,可以传空或null
   request.send();
   //4、AJAX对象的事件属性onreadystatechange,不断监听服务器端的响应
   request.onreadystatechange = function() {
    //当请求状态为4,且响应码为200时,表示服务器响应成功,并返回了用户数据
    if (request.readyState == 4 && request.status == 200) {
     //根据数据类型,更新当前页面中的DOM节点信息
     document.getElementByTagName('h3')[0].innerHTML=request.responseText;
    }
   };
   return false;//取消a元素的默认点击行为
  };
 });
</script>
<body>
 <a href=''></a>
 <h3></h3>
</body>

AJAX访问html文件

<script>
 $(document).ready(function() {
  //获取页面中所有a元素,并添加点击事件
  var aNodes = getElementByTagName('a');
  //获取当前页面需要更新的DOM节点
  var content = getElementById('content');
  //给所有a元素添加点击事件,每个链接都会访问到一个不同的html文件
  for (var i=0;i<aNodes.length;i++) {
   aNodes[i].onclick = function {
    //1、获取XHR对象
   var request = new XMLHttpRequest();
   //2、配置AJAX请求参数:请求类型,请求的URL资源,请求方式,默认为true,即异步
   //request.open('GET','URL',true);
   request.open('GET',this.href+'?'+(new Date()),true);//每次请求都是最新数据
   //3、将AJAX请求发送到服务器,GET请求不需要参数,可以传空或null
   request.send();
   //4、AJAX对象的事件属性onreadystatechange,不断监听服务器端的响应
   request.onreadystatechange = function() {
    //当请求状态为4,且响应码为200时,表示服务器响应成功,并返回了用户数据
    if (request.readyState == 4 && request.status == 200) {
     //根据数据类型,更新当前页面中的DOM节点信息
     document.getElementByTagName('h3')[0].innerHTML=request.responseText;
   }
   return false;//取消a元素的默认点击行为 
  }
  };
 });
</script>
<body>
 <a href='1.html'></a>
 <a href='2.html'></a>
 <a href='3.html'></a>
 <div id='content'></div>
</body>

AJAX访问XML格式数据

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AJAX---xml</title>
	<script src="jQuery/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
 $(document).ready(function() {
  //获取页面中所有a元素中的第一个,并添加点击事件
  document.getElementsByTagName('a')[0].οnclick=function() {
   //1、获取XHR对象
   var request = new XMLHttpRequest();
   //2、配置AJAX请求参数:请求类型,请求的URL资源,请求方式,默认为true,即异步
   // request.open('GET','URL',true);
   request.open('GET',this.href+'?='+(new Date()),true);//每次请求都是最新数据
   //3、将AJAX请求发送到服务器,GET请求不需要参数,可以传空或null
   request.send();
   //4、AJAX对象的事件属性onreadystatechange,不断监听服务器端的响应
   request.onreadystatechange = function() {
    //当请求状态为4,且响应码为200时,表示服务器响应成功,并返回了用户数据
    if (request.readyState == 4 && request.status == 200) {
    	var result = request.responseXML;
      //解析当前XML文件中的每个节点数据,保存到对应变量中,XML支持所有DOM操作
    	var name = result.getElementsByTagName('name')[0].childNodes[0].nodeValue;
    	var age = result.getElementsByTagName('age')[0].childNodes[0].nodeValue;
    	var job = result.getElementsByTagName('job')[0].childNodes[0].nodeValue;
     //根据数据类型,更新当前页面中的DOM节点信息
     document.getElementById('name').innerHTML=name;
     document.getElementById('age').innerHTML=age;
     document.getElementById('job').innerHTML=job;
    }
   };
   return false;//取消a元素的默认点击行为
  };
 });
	</script>
</head>
<body>
	<a href="1.xml" rel="external nofollow" >我的信息</a>
	<div>
		<p id='name'></p>
		<p id='age'></p>
		<p id='job'></p>
	</div>
</body>
</html>

xml文件:

<?xml version="1.0" encoding="UTF-8" ?>
<info>
	<name>Zhang</name>
	<age>28</age>
	<job>php</job>
</info>

AJAX访问JSON格式数据

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JSON</title>
	<script src="jQuery/jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			document.getElementById('btn').onclick = function(event) {
				//第一种
				var data = {
					'name':'zhang',
					'age':'28',
					'hobby':['跑步','睡觉'],
					'job':{
						'php':'Mysql',
						'html':'jQuery'
					}
				};
				//第二种
				var json = '{\
					"name":"zhang",\
					"age":"28",\
					"hobby":["跑步","睡觉"],\
					"job":{\
						"php":"Mysql",\
						"html":"jQuery",\
					}\
				}';
				var data = eval('('+json+')');
				document.getElementById('name').innerHTML=data.name;
				document.getElementById('age').innerHTML=data.age;
				document.getElementById('hobby').innerHTML=data.hobby[1];
				document.getElementById('job').innerHTML=data.job.php;
				//第三种
				var request = new XMLHttpRequest;
				request.open('GET','demo.json',true);
				request.send(null);
				request.onreadystatechange = function() {
					if (request.readyState==4 && request.status==200) {
						var data = JSON.parse(request.responseText);
						document.getElementById('name').innerHTML=data.name;
						document.getElementById('age').innerHTML=data.age;
						document.getElementById('hobby').innerHTML=data.hobby[1];
						document.getElementById('job').innerHTML=data.job.php;
					}
				}
			}
		});
	</script>
</head>
<body>
	<button type="button" name="button" id="btn">我的信息</button>
	<p id="name"></p>
	<p id="age"></p>
	<p id="hobby"></p>
	<p id="job"></p>
</body>
</html>

AJAX访问中的$.ajax()函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>$.ajax()</title>
	<script src="jQuery/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$('#btn').click(function() {
				$.ajax({
					type:'GET',//http的请求方法
					url:'demo.json',//要获取数据的URL
					data:null,//不给URL添加任何数据
					dataType:'json',//将获取到的数据当作JSON类型处理
					success:function(data) {//完成时调用
						$('#name').text(data.name);
						$('#age').text(data.age);
						$('#hobby').text(data.hobby[1]);
						$('#job').text(data.job.php);
					},
					error:function(data) {//失败时调用
						alert('获取失败!');
					}
				});
			});
		});
	</script>
</head>
<body>
	<button type="button" name="button" id="btn">我的信息</button>
	<p id="name"></p>
	<p id="age"></p>
	<p id="hobby"></p>
	<p id="job"></p>
</body>
</html>

AJAX访问中的load()方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>get</title>
	<script src="jQuery/jquery-1.8.3.min.js"></script>
<script type='text/javascript'>
 $(function() {
  $('button').click(function() {
   //1、获取纯文本文件的内容
   $('div').load('hello.txt');
 
   //2、获取html文件的内容,可以使用jquery选择器,按需获取
   $('div').load('hello.html');//获取html文件全部内容
   $('div').load('hello.html li:first','?'+(new Date()));//获取第一个li的内容
   $('div').load('hello.html li:eq(2)');/获取索引为2的li内容
   $('div').load('hello.html li:odd','?'+(new Date()));//获取全部li中索引为奇数的内容
   //3、获取XML中的数据,与访问HTML一样,也可以使用选择器
   $('div').load('1.xml');//返回xml,全部同行显示
   $('div').load('1.xml work');//显示指定标签名的数据
   $('div').load('1.xml work',function() {
    $(this).css('color','red');
   });//可以使用回调函数
   
   //4、获取JSON数据,json不能直接使用,必须通过回调函数来进行解析后再使用
   $('div').load('demo.json',function(data) {
    //将获取到的json字符串解析为js对象
    var jsonObj = JSON.parse(data);
    $(this).empty()
    $(this).append('<p>姓名:<span>'+jsonObj.name"'</span></p>')
   });
  });
 });
	</script>
</head>
<body>
	<button type="button" name="button">测试</button>
	<div id="con"></div>
</body>
</html>

AJAX访问中的$.get()方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>get</title>
	<script src="jQuery/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$('button').click(function(event) {
				//1、从服务器中返回纯文本或html
				$.get('1.php',function(data) {
					$('#con').html(data);
				});
				//2、服务器返回XML格式数据
				$.get('1.php',function(data) {
					//将XML数据转为jQuery对象,并获取内部的数据
					var name = $(data).children('name').text();
					//将解析出的数据拼接成需要显示的html代码
					var html = '<p>'+name+'</p>';
					//将html代码插入到指定节点
					$('#con').html(html);
				});
				//3、服务器返回JSON格式数据
				$.get('1.php',function(data) {
					var jsonObj = JSON.parse(data);//返回一个JSON格式字符串,需要先解析成JS对象
					$('#con').empty().append('<p>姓名:'+jsonObj.name+'</p>');
				});
			});
		});
	</script>
</head>
<body>
	<button type="button" name="button">测试</button>
	<div id="con"></div>
</body>
</html>

1.php:

<?php
 echo 'hello world!';//纯文本
 
//XML格式数据
echo <<<'XML'
	<?xml version="1.0" encoding="UTF-8" ?>
 <info>
 	<name>Zhang</name>
 	<age>28</age>
 	<job>php</job>
 </info>
XML;
 
//JSON格式数据
echo '{"name":"zhang","age":"28","hobby":["跑步","睡觉"],"job":{"php":"Mysql","html":"jQuery"}}';
?>

AJAX中的$.getJSON()函数

<script>
 $.getJson('1.php',function(data) {
  $('#con').empty().append('<p>姓名:'+data.name+'</p>');
 });
</script>

AJAX中的$.post()方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>post</title>
	<script src="jQuery/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$('#name').change(function(event) {
				$.post(
					'check.php',
					{
						'name':$(this).val()
					},
					function(data) {
						console.log(data);
						$('#name').next().empty();
						$('#name').after(data);
					}
				);
			});
 
			$('#sub').click(function(event) {
				var name = $('#name').val();
				if ('' == name && null == name) {
						$('#name').after('<span>用户名不能为空</span>');
						return false;
					}
			});
		});
	</script>
</head>
<body>
	<form action="" method="post">
		姓名:<input type="text" name="name" value='' id='name'><br/>
		密码:<input type="password" name="password" value="" id='ps'><br>
		<input type="submit" name="" value='提交' id='sub'>
		<input type="reset" name="">
	</form>
</body>
</html>

check.php

<?php
$info = $_POST;
 
$name = isset($info['name']) ? $info['name'] : '';
$arr_name = ['zhang','li'];
if (!empty($name) && in_array($name, $arr_name)) {
	echo '<script>alert("名称已存在");window.history.back(-1);</script>';
} elseif (empty($name)) {
	echo '<script>alert("不可为空");window.history.back(-1);</script>';
} else {
	echo '<span style="color:blue">名称可用</span>';
}
?>

更多关于jQuery相关内容可查看本站专题:《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件之validation插件
Mar 29 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 #jQuery
JQuery事件冒泡和默认行为代码实例
May 13 #jQuery
JQuery表单元素取值赋值方法总结
May 12 #jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 #jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 #jQuery
基于JQuery实现页面定时弹出广告
May 08 #jQuery
JQuery复选框全选效果如何实现
May 08 #jQuery
You might like
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
javascript 页面划词搜索JS
2009/09/28 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
python3中str(字符串)的使用教程
2017/03/23 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
基于python调用psutil模块过程解析
2019/12/20 Python
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
农田水利实习自我鉴定
2013/09/19 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
人事助理自荐信
2014/02/02 职场文书
信仰心得体会
2014/09/05 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
2014年科研工作总结
2014/12/03 职场文书
实习证明模板
2015/06/16 职场文书
法制教育讲座心得体会
2016/01/14 职场文书