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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
jQuery实现穿梭框效果
Jan 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
PHP EOT定界符的使用详解
2008/09/30 PHP
php+highchats生成动态统计图
2014/05/21 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
python实现简易通讯录修改版
2018/03/13 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
Python Grid使用和布局详解
2018/06/30 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
python将图片转base64,实现前端显示
2020/01/09 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
python unichr函数知识点总结
2020/12/16 Python
python中altair可视化库实例用法
2021/01/26 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
小学运动会报道稿
2014/10/04 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
上课迟到检讨书
2015/05/06 职场文书
家访教师心得体会
2016/01/23 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
python process模块的使用简介
2021/05/14 Python