欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery AJAX應(yīng)用實(shí)例總結(jié)

 更新時(shí)間：2020年05月19日 10:16:40   作者：人生如初見_張默  
這篇文章主要介紹了jQuery AJAX應(yīng)用,結(jié)合實(shí)例形式總結(jié)分析了jQuery 使用AJAX訪問各種格式數(shù)據(jù)相關(guān)應(yīng)用操作實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例總結(jié)了jQuery AJAX應(yīng)用。分享給大家供大家參考，具體如下：

AJAX

是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開發(fā)技術(shù)。

AJAX=異步JavaScript和XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集）。

AJAX是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。

AJAX是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部份網(wǎng)頁(yè)的技術(shù)。

通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX可以使用網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新，也就是：按需更新。

AJAX解析純文本數(shù)據(jù)

<script>
 $(document).ready(function() {
  //獲取頁(yè)面中所有a元素中的第一個(gè)，并添加點(diǎn)擊事件
  document.getElementByTagName('a')[0].οnclick=function() {
   //1、獲取XHR對(duì)象
   var request = new XMLHttpRequest();
   //2、配置AJAX請(qǐng)求參數(shù)：請(qǐng)求類型，請(qǐng)求的URL資源，請(qǐng)求方式，默認(rèn)為true，即異步
   request.open('GET','URL',true);
   request.open('GET',this.href+'?'+(new Date()),true);//每次請(qǐng)求都是最新數(shù)據(jù)
   //3、將AJAX請(qǐng)求發(fā)送到服務(wù)器，GET請(qǐng)求不需要參數(shù)，可以傳空或null
   request.send();
   //4、AJAX對(duì)象的事件屬性onreadystatechange，不斷監(jiān)聽服務(wù)器端的響應(yīng)
   request.onreadystatechange = function() {
    //當(dāng)請(qǐng)求狀態(tài)為4，且響應(yīng)碼為200時(shí)，表示服務(wù)器響應(yīng)成功，并返回了用戶數(shù)據(jù)
    if (request.readyState == 4 && request.status == 200) {
     //根據(jù)數(shù)據(jù)類型，更新當(dāng)前頁(yè)面中的DOM節(jié)點(diǎn)信息
     document.getElementByTagName('h3')[0].innerHTML=request.responseText;
    }
   };
   return false;//取消a元素的默認(rèn)點(diǎn)擊行為
  };
 });
</script>
<body>
 <a href=''></a>
 <h3></h3>
</body>

AJAX訪問html文件

<script>
 $(document).ready(function() {
  //獲取頁(yè)面中所有a元素，并添加點(diǎn)擊事件
  var aNodes = getElementByTagName('a');
  //獲取當(dāng)前頁(yè)面需要更新的DOM節(jié)點(diǎn)
  var content = getElementById('content');
  //給所有a元素添加點(diǎn)擊事件，每個(gè)鏈接都會(huì)訪問到一個(gè)不同的html文件
  for (var i=0;i<aNodes.length;i++) {
   aNodes[i].onclick = function {
    //1、獲取XHR對(duì)象
   var request = new XMLHttpRequest();
   //2、配置AJAX請(qǐng)求參數(shù)：請(qǐng)求類型，請(qǐng)求的URL資源，請(qǐng)求方式，默認(rèn)為true，即異步
   //request.open('GET','URL',true);
   request.open('GET',this.href+'?'+(new Date()),true);//每次請(qǐng)求都是最新數(shù)據(jù)
   //3、將AJAX請(qǐng)求發(fā)送到服務(wù)器，GET請(qǐng)求不需要參數(shù)，可以傳空或null
   request.send();
   //4、AJAX對(duì)象的事件屬性onreadystatechange，不斷監(jiān)聽服務(wù)器端的響應(yīng)
   request.onreadystatechange = function() {
    //當(dāng)請(qǐng)求狀態(tài)為4，且響應(yīng)碼為200時(shí)，表示服務(wù)器響應(yīng)成功，并返回了用戶數(shù)據(jù)
    if (request.readyState == 4 && request.status == 200) {
     //根據(jù)數(shù)據(jù)類型，更新當(dāng)前頁(yè)面中的DOM節(jié)點(diǎn)信息
     document.getElementByTagName('h3')[0].innerHTML=request.responseText;
   }
   return false;//取消a元素的默認(rèn)點(diǎn)擊行為 
  }
  };
 });
</script>
<body>
 <a href='1.html'></a>
 <a href='2.html'></a>
 <a href='3.html'></a>
 <div id='content'></div>
</body>

AJAX訪問XML格式數(shù)據(jù)

<!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() {
  //獲取頁(yè)面中所有a元素中的第一個(gè)，并添加點(diǎn)擊事件
  document.getElementsByTagName('a')[0].οnclick=function() {
   //1、獲取XHR對(duì)象
   var request = new XMLHttpRequest();
   //2、配置AJAX請(qǐng)求參數(shù)：請(qǐng)求類型，請(qǐng)求的URL資源，請(qǐng)求方式，默認(rèn)為true，即異步
   // request.open('GET','URL',true);
   request.open('GET',this.href+'?='+(new Date()),true);//每次請(qǐng)求都是最新數(shù)據(jù)
   //3、將AJAX請(qǐng)求發(fā)送到服務(wù)器，GET請(qǐng)求不需要參數(shù)，可以傳空或null
   request.send();
   //4、AJAX對(duì)象的事件屬性onreadystatechange，不斷監(jiān)聽服務(wù)器端的響應(yīng)
   request.onreadystatechange = function() {
    //當(dāng)請(qǐng)求狀態(tài)為4，且響應(yīng)碼為200時(shí)，表示服務(wù)器響應(yīng)成功，并返回了用戶數(shù)據(jù)
    if (request.readyState == 4 && request.status == 200) {
    	var result = request.responseXML;
      //解析當(dāng)前XML文件中的每個(gè)節(jié)點(diǎn)數(shù)據(jù)，保存到對(duì)應(yīng)變量中，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;
     //根據(jù)數(shù)據(jù)類型，更新當(dāng)前頁(yè)面中的DOM節(jié)點(diǎn)信息
     document.getElementById('name').innerHTML=name;
     document.getElementById('age').innerHTML=age;
     document.getElementById('job').innerHTML=job;
    }
   };
   return false;//取消a元素的默認(rèn)點(diǎn)擊行為
  };
 });
	</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格式數(shù)據(jù)

<!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()函數(shù)

<!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的請(qǐng)求方法
					url:'demo.json',//要獲取數(shù)據(jù)的URL
					data:null,//不給URL添加任何數(shù)據(jù)
					dataType:'json',//將獲取到的數(shù)據(jù)當(dāng)作JSON類型處理
					success:function(data) {//完成時(shí)調(diào)用
						$('#name').text(data.name);
						$('#age').text(data.age);
						$('#hobby').text(data.hobby[1]);
						$('#job').text(data.job.php);
					},
					error:function(data) {//失敗時(shí)調(diào)用
						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、獲取純文本文件的內(nèi)容
   $('div').load('hello.txt');
 
   //2、獲取html文件的內(nèi)容，可以使用jquery選擇器，按需獲取
   $('div').load('hello.html');//獲取html文件全部?jī)?nèi)容
   $('div').load('hello.html li:first','?'+(new Date()));//獲取第一個(gè)li的內(nèi)容
   $('div').load('hello.html li:eq(2)');/獲取索引為2的li內(nèi)容
   $('div').load('hello.html li:odd','?'+(new Date()));//獲取全部li中索引為奇數(shù)的內(nèi)容
   //3、獲取XML中的數(shù)據(jù)，與訪問HTML一樣，也可以使用選擇器
   $('div').load('1.xml');//返回xml,全部同行顯示
   $('div').load('1.xml work');//顯示指定標(biāo)簽名的數(shù)據(jù)
   $('div').load('1.xml work',function() {
    $(this).css('color','red');
   });//可以使用回調(diào)函數(shù)
   
   //4、獲取JSON數(shù)據(jù)，json不能直接使用，必須通過回調(diào)函數(shù)來進(jìn)行解析后再使用
   $('div').load('demo.json',function(data) {
    //將獲取到的json字符串解析為js對(duì)象
    var jsonObj = JSON.parse(data);
    $(this).empty()
    $(this).append('<p>姓名：<span>'+jsonObj.name"'</span></p>')
   });
  });
 });
	</script>
</head>
<body>
	<button type="button" name="button">測(cè)試</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、從服務(wù)器中返回純文本或html
				$.get('1.php',function(data) {
					$('#con').html(data);
				});
				//2、服務(wù)器返回XML格式數(shù)據(jù)
				$.get('1.php',function(data) {
					//將XML數(shù)據(jù)轉(zhuǎn)為jQuery對(duì)象，并獲取內(nèi)部的數(shù)據(jù)
					var name = $(data).children('name').text();
					//將解析出的數(shù)據(jù)拼接成需要顯示的html代碼
					var html = '<p>'+name+'</p>';
					//將html代碼插入到指定節(jié)點(diǎn)
					$('#con').html(html);
				});
				//3、服務(wù)器返回JSON格式數(shù)據(jù)
				$.get('1.php',function(data) {
					var jsonObj = JSON.parse(data);//返回一個(gè)JSON格式字符串，需要先解析成JS對(duì)象
					$('#con').empty().append('<p>姓名:'+jsonObj.name+'</p>');
				});
			});
		});
	</script>
</head>
<body>
	<button type="button" name="button">測(cè)試</button>
	<div id="con"></div>
</body>
</html>

1.php:

<?php
 echo 'hello world!';//純文本
 
//XML格式數(shù)據(jù)
echo <<<'XML'
	<?xml version="1.0" encoding="UTF-8" ?>
 <info>
 	<name>Zhang</name>
 	<age>28</age>
 	<job>php</job>
 </info>
XML;
 
//JSON格式數(shù)據(jù)
echo '{"name":"zhang","age":"28","hobby":["跑步","睡覺"],"job":{"php":"Mysql","html":"jQuery"}}';
?>

AJAX中的$.getJSON()函數(shù)

<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>';
}
?>

更多關(guān)于jQuery相關(guān)內(nèi)容可查看本站專題：《jquery中Ajax用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論