jquery的ajax典型用法

最新推荐文章于 2025-06-14 23:49:20 发布

超级梦想家

最新推荐文章于 2025-06-14 23:49:20 发布

阅读量109

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery 文章标签： jquery；ajax用法

本文链接：https://blog.youkuaiyun.com/dsh989224/article/details/84133689

Jquery 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用AJAX技术实现前端与后端的数据交互，并通过实例展示了如何利用jQuery进行页面元素的动态更新，确保用户体验的流畅性和响应性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function dataInfoList() {
		var ur=document.getElementById("url").value;
		submitData = "pageUtil.curPage=" + curPage;
		$.ajax({ //一個ajax過程
					type : "post", //以post方式與後臺溝通
					url : ur+"/请求数据的地址", //與此頁面溝通
					dataType : "json",//返回的值以html方式解釋
					data :submitData,
					beforeSend : function(XMLHttpRequest) {
						delRow();
						$("#site_list")
								.html(
										"&nbsp;&nbsp;&nbsp;&nbsp;<img src=\""+ur+"/images/loading_detail.gif\"><span>請稍後，數據加載中！</span>");
						$("#site_list").css({
							display : ""
						});
					},
					success : function(data) {//如果調用成功
						$("#site_list").css({
							display : "none"
						});
			 			var roads=eval('('+data.roadJson+')');
			 			var city=eval('('+data.cityJson+')');
					for(var i=0;i<roads.length;i++){
						showRoads(roads[i],city); 
					}
						$("#pageBar").html(data.pageBar);
					},
					error : function() {
						$("#loadingMessage").css({
							display : ""
						});

						$("#loadingMessage")
								.html(
										"<span class=\"errorFont\">查詢過程中出現錯誤，請稍後再試！</span>");

					}

				});
	}