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 Tree Multiselect使用详解
May 02 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 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
短波问题解答
2021/02/28 无线电
用PHP实现图象锐化代码
2007/06/14 PHP
php下intval()和(int)转换使用与区别
2008/07/18 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
php二维码生成以及下载实现
2017/09/28 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
在Django的视图(View)外使用Session的方法
2015/07/23 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
对python中list的五种查找方法说明
2020/07/13 Python
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
市场营销专业毕业生求职信
2014/03/26 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS