浅谈jQuery的ajax请求load方法

最新推荐文章于 2022-08-03 09:01:04 发布

原创最新推荐文章于 2022-08-03 09:01:04 发布 · 633 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript学习专栏收录该内容

14 篇文章

订阅专栏

悲剧的是之前写的内容全部丢失，索性只好写点ajax的内容吧，自己写了个小的demo，当做理解，用firefox或ie来解释执行，chrome出于安全性考虑，不允许js load本地文件，应该是有解决办法的，这里不表。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="scripts/jquery-2.1.4.js"></script>

<script type="text/javascript">
	var showContent = function(){
		alert("start");
		$("#result").load('examples/content.txt',function(response,status,xhr){
			alert("规定当请求完成时运行的函数");
			alert(response);
			alert(status);
			alert(xhr);
			});
		alert("end");
	}

//  function showContent(){
//		alert("hello");
//	}
</script>
</head>
<body>

<div id="myDiv">
<h2>通过 AJAX 改变文本</h2>
</div>
<button id="b01"  onclick="showContent()">改变内容</button>
<div id="result"></div>
</body>
</html>

jQuery ajax load() 方法

1. 定义和用法

load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。

2. 语法

load(url,data,function(response,status,xhr))

参数	描述
url	规定要将请求发送到哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
function(response,status,xhr)	可选。规定当请求完成时运行的函数。额外的参数： response - 包含来自请求的结果数据 status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"） xhr - 包含 XMLHttpRequest 对象

参数

描述

url

规定要将请求发送到哪个 URL。

data

可选。规定连同请求发送到服务器的数据。

function(response,status,xhr)

可选。规定当请求完成时运行的函数。

额外的参数：

response - 包含来自请求的结果数据
status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）
xhr - 包含 XMLHttpRequest 对象

3. 详细说明

该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价，不同的是它不是全局函数，并且它拥有隐式的回调函数。当侦测到成功的响应时（比如，当 textStatus 为 "success" 或 "notmodified" 时），.load() 将匹配元素的 HTML 内容设置为返回的数据。