Ajax 資料非同步互動

一隻寫程式的猿發表於2018-01-16

#1.Ajax簡介 AJAX = 非同步 JavaScript 和 XML。 AJAX 是一種用於建立快速動態網頁的技術。通過在後臺與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

#2.AJAX 例項

查詢提示

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>查詢訪問</title>

	<!-- 

	https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=
	https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=abc&cb=jQuery110206545585568528622_1499224165848&_=1499224165856
	 -->

	<style type="text/css">
		*{margin:0px;padding: 0px;}
		#container{width:800px;margin:auto;margin-top:10px;}
		input[id="keywords"]{width: 500px;height: 40px;border:solid 2px #cecece;font-size: 22px;line-height: 40px;color:#888;padding-left: 10px;} 	

		#sug{width:512px;list-style: none;border:solid 1px #ccc;}
		#sug li{height: 30px;background:#fcfcfc;line-height:30px;font-size:18px}

	</style>
	<script type="text/javascript" src="../jquery-1.12.4.js"></script>

</head>
<body>
	<div id="container">
		<div>
			<input type="text" id="keywords" placeholder="請輸入關鍵詞">
		</div>
		<ul id="sug">
			<!-- <li>建議搜尋的關鍵詞</li> -->
		</ul>
	</div>

	<script>
		// 獲取輸入框
		var $kw = $("#keywords");

		// 新增鍵盤按鍵抬起事件
		$kw.keyup(function(){
			// 獲取輸入框中的輸入
			var $value = $kw.val();

			// 呼叫函式，獲取資料
			$.ajax({
				url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=?",
				type:"get",
				data:{wd:$value},
				dataType:"jsonp",
				success:function(msg){
					// 當url介面訪問成功的時候，自動呼叫success對應的函式，介面返回的資料會自動存放在函式的引數data中
					console.log(msg.s);
					// 將輸入輸出到頁面中;dom操作
					var _sug = msg.s;
					// 清空原來的url標籤;
					$("#sug").empty();

					for (var i = 0;i< _sug.length;i++){
						// 建立一個li標籤
						var $li = $("<li>")
						// 標籤中新增文字資料
						$li.text(_sug[i]);
						// 將li標籤，新增到頁面中
						$("#sug").append($li);


					}
				}
			}); 
		});

	</script>

</body>
</html>


<!-- 	dataType:"jsonp",
		同源策略：web規範了只有相同源頭（域名）的資料才可以互相訪問
		同源策略是為了資料的安全性，而設定的一種網路資料訪問限制

		跨域：從不同的域名下訪問指定的資料 -->

複製程式碼

效果展示：

天氣預報查詢地址

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>天氣預報</title>
	<style>
		*{margin:0px;padding:0px;}
		#container{width:800px;margin:auto;font-size: 20px;font-weight: bolder;}
		input[id="city"]{width:500px;height:35px;border:solid 2px #cecece;font-size:22px;line-height:35px;color:#888;padding-left:10px; margin:10px;}
		#show{display:block;width: 600px;height: 300px;border: solid 2px #888;margin: 10px auto; list-style: none;padding: 10px;border-radius: 8px;box-shadow: 10px 10px 5px #888}

	</style>
	<script type="text/javascript" src="../jquery-1.12.4.js"></script>
</head>
<body>
	<div id="container">
		<div>
			請輸入城市名稱：
			<input type="text" id="city" placeholder="請輸入想查詢的地區">
		</div>
		<ul id="show">
			<li>天氣資訊</li>
		</ul>
		
	</div>

 <script>
		// 獲取需要的標籤物件
		var _city = $("#city");
		var _show = $("#show");

		// 新增事件處理
		_city.blur(function(){
			// 獲取輸入框中的輸入資料
			var $value = _city.val();

			_show.empty();
			// 呼叫函式，獲取資料
			$.ajax({
				url:"http://wthrcdn.etouch.cn/weather_mini?callback=?",
				type:"get",
				data:{city:$value},
				dataType:"jsonp",
				success:function(msg){
					// 當url介面訪問成功的時候，自動呼叫success對應的函式，介面返回的資料會自動存放在函式的引數data中
					console.log(msg);
					// 獲取城市資料，展示到頁面中
					var $city = $("<li>");
					$city.text(msg.data.city + "天氣預報資訊：");

					// 獲取今天溫度資料
					var $wd = $("<li>");
					$wd.text("今天溫度："+ msg.data.wendu);

					// 獲取今天感冒指數資料
					var $gm = $("<li>");
					$gm.text("溫馨提示："+ msg.data.ganmao);

					// 今天天氣預報
					var $today = $("<li>");

					var $date = $("<span>").text("日期：" + msg.data.forecast[0].date)
					var $type = $("<span>").text("；今天天氣:" + msg.data.forecast[0].type)
					var $high = $("<span>").text("；最高氣溫:" + msg.data.forecast[0].high)
					var $low = $("<span>").text("；最低氣溫:" + msg.data.forecast[0].low)
					var $fl = $("<span>").text("；風力:" + msg.data.forecast[0].fengli)
					var $fx = $("<span>").text("；風向:" + msg.data.forecast[0].fengxiang)

					$today.append($date).append($type).append($high).append($low).append($fl).append($fx);

					_show.append($city).append($wd).append($gm).append($today);
				},	
				error:function(){
					console.log("執行錯誤...");				
				}
			}); 
		});

	</script>
</body>
</html>

複製程式碼

效果展示：

快遞單號查詢介面

	<!DOCTYPE html>
	<html>
	<head>
		<meta charset="utf-8">
		<title>快遞資訊查詢</title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			#container{width: 800px;margin: 15px auto;font-size: 20px;font-weight: bolder;}
			select[id="company"]{width: 200px;height: 30px;font-size: 18px;font-family: "微軟雅黑";border-radius: 5px;}
			#wb{float: left;}
			input[id="postid"]{margin:10px auto;width: 200px;height: 20px;font-size: 14px;font-family: "微軟雅黑";border-radius: 3px;}
			button[id="cx"]{display: block;width: 56px;height: 26px;background-color:#388bff;color:white;margin: 8px 380px;}
			ul[id="show"]{list-style: none;width: 500px;height:500px;border:solid 2px #888; border-radius: 8px; }
			#container ul li p{padding:15px;width:480px;
				min-height: 50px;font-size:14px;}

		</style>

		<script type="text/javascript" src="../jquery-1.12.4.js">
		</script>

	</head>
	<body>
		<div id="container">
			<div>
				<label for="company">快遞公司名稱</label>
				<select id="company" name="address">
						<option value="shunfeng">順豐速運</option>
						<option value="shentong">申通快遞</option>
						<option value="ems">EMS</option>
						<option value="yuantong">圓通速遞</option>
						<option value="zhongtong">中通快遞</option>
						<option value="tiantian">天天快遞</option>
						<option value="huitongkuaidi">匯通快遞</option>
						<option value="yunda">韻達速遞</option>
						<option value="quanfengkuaidi">全峰快遞</option>
						<option value="debangwuliu">德邦</option>
						<option value="zhaijisong">宅急送</option>
				</select>
			</div>
			<div id="wb">
				<label for="post">輸入快遞單號</label>
				<input type="text" id="postid">
			</div>
			<div>
				<button id="cx">查詢</button>
			</div>

			<ul id="show">
				<li>
					<i></i>
					<p>物流資訊</p>
				</li>
			</ul>
			<div style="clear:both;"></div>
		</div>

		<script>
			// 獲取標籤物件：快遞公司
			var $selector=$("#company");
			// 獲取快遞單號
			var $postid=$("#postid");
			// 查詢
			var $cx=$("#cx");

			// 給查詢按鈕新增點選事件
			$cx.click(function(){
				// 獲取需要的資料
				var $company = $selector.val();
				var $value = $postid.val();

				// ajax 獲取資料
				$.ajax({
					url:"https://sp0.baidu.com/9_Q4sjW91Qh3otqbppnN2DJv/pae/channel/data/asyncqury?cb=?",
					type:"get",
					data:{com:$company,nu:$value,appid:4001},
					dataType:"json",
					success:function(msg){
						// 清空歷史訊息
						$("#show").empty();

						// 獲取介面返回的資料
						console.log(msg);
						var $info = msg.data.info.context;

						// 迴圈遍歷資料
						for(var i = 0; i <$info.length;i++){
							// 獲取每一筆的時間資訊
							var $time = $info[i].time;
							$time = getTimeStr($time);

							// 獲取每一筆的快遞資訊
							var $desc = $info[i].desc;

							// 建立標籤，新增到頁面中
							var $msg = $("<p>").text($time + ":" + $desc);
							var $i = $("<i>");

							var $kd = $("<li>");
							$kd.append($i).append($msg);
							// 新增到頁面中
							$("#show").append($kd);
						} 


					},
					error:function(){
						console.log("系統繁忙，查詢失敗");
					}
				});
			});

			// 獲取時間字串
			function getTimeStr(dt){
				var _date = new Date(parseInt(dt*1000));
				return _date.getFullYear() + "-" + (_date.getMonth() + 1) + "-" + _date.getDate() + " " + _date.getHours() + ":" + _date.getMinutes() + ":" + _date.getSeconds();


			}
		</script>


	</body>
	</html>

複製程式碼

效果展示

#####推薦幾個網站

jQuery外掛庫：JS特效,網頁特效,以及各種html5,css3動畫和效果

Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。

阿里巴巴向量圖示庫：Iconfont-國內功能很強大且圖示內容很豐富的向量圖示庫,提供向量圖示下載、線上儲存、格式轉換等功能。

Swiper(Swiper master)：是目前應用較廣泛的移動端網頁觸控內容滑動js外掛。

AJAX資料互動中的同步非同步
2017-03-03
非同步
SpringMVC之ajax非同步互動
2021-01-02
SpringMVC非同步
AJAX資料互動及檔案上傳功能
2018-09-22
web互動方式---ajax
2019-07-08
Web
前後端資料互動(三)——ajax 封裝及呼叫
2021-09-06
後端封裝
前後端資料互動(二)——原生 ajax 請求詳解
2021-09-05
後端
資料互動——Promise、Ajax、axios和fetch的優缺點
2020-04-13
PromiseiOS
Ajax概述，封裝以及聯合模板引擎進行資料互動
2022-03-19
封裝
資料互動
2019-03-20
ajax與XML檔案互動
2018-09-10
XML
2.3.3 關於使用非互動式/靜默DBCA建立資料庫
2020-02-28
資料庫
WPF和js互動 WebBrowser資料互動
2014-06-17
JSWeb
Flask資料互動
2024-04-22
Flask
Ajax使用jQuery與後臺互動
2016-12-01
jQuery
【Django】ajax 非同步重新整理獲取資料
2018-01-15
Django非同步
資料互動筆記
2019-03-16
筆記
oracle 11g使用DBCA以非互動(靜默)方式建立資料庫
2014-04-08
Oracle資料庫
淺析mysql互動式連線&非互動式連線
2021-09-09
MySql
前端筆記之伺服器&Ajax（上）伺服器&PHP&資料互動&HTTP
2019-04-14
前端筆記伺服器PHPHTTP
AJAX-前後端互動的藝術
2019-11-20
後端
Android FlatBuffers資料互動
2018-11-27
Android
前後端資料交換互動
2020-08-21
後端
Hive 與 ElasticSearch 的資料互動
2019-01-27
HiveElasticsearch
Android與WebView資料互動
2018-07-24
AndroidWebView
SSH前後端資料互動
2016-12-18
後端
Android ReactNative資料互動
2018-04-21
AndroidReact
AJAX同步和非同步區別
2018-06-03
非同步
FTP非互動方式檔案傳輸(轉)
2007-08-09
FTP
JS互動邏輯詳解——data資料變更時同步（setData 函式） & 檢視層更新是非同步
2020-10-16
JS函式非同步
同步非同步，阻塞非阻塞
2020-03-20
非同步
非同步、同步、阻塞、非阻塞
2020-10-28
非同步
同步、非同步、阻塞、非阻塞
2013-05-21
非同步
在SAP WebClient UI裡使用AJAX進行非同步資料讀取
2020-09-13
WebclientUI非同步
ajax的true非同步或者false同步
2017-02-10
非同步False
python與mysql資料庫互動
2020-01-08
PythonMySql資料庫
前後端資料互動利器--Protobuf
2021-08-01
後端
Beego框架學習--（核心：資料互動）
2020-12-03
Go框架
所有權背後的資料互動
2022-02-28

Ajax 資料非同步互動

相關文章