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使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 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
一个简单的PHP&amp;MYSQL留言板源码
2020/07/19 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
PHP+MySQL修改记录的方法
2015/01/21 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
ES6扩展运算符用法实例分析
2017/10/31 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python实现中文分词FMM算法实例
2015/07/10 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
python实现多线程端口扫描
2019/08/31 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
计算机系毕业生推荐信
2013/11/06 职场文书
个人安全生产承诺书
2014/05/22 职场文书
售后客服个人自我评价
2014/09/14 职场文书
投资意向协议书
2015/01/29 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
卡特教练观后感
2015/06/08 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
Python一些基本的图像操作和处理总结
2021/06/23 Python