jQuery AJAX 方法 | 易学教程

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。

1. $.ajax(): 执行异步AJAX（异步 HTTP）请求,所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

语法：$.ajax( { name: value, name:value,... } ) 该参数规定 AJAX 请求的一个或多个名称/值对。

1.jQuery load() 方法: 从服务器加载数据，并把返回的数据放置到指定的元素中。

注意：还存在一个名为 load 的 jQuery 事件方法。调用哪个，取决于参数。语法:$(selector).load(url,data,function(response,status,xhr))\

参数	描述
url	必需。规定您需要加载的 URL。
data	可选。规定连同请求发送到服务器的数据。
function(response,status,xhr)	可选。规定 load() 方法完成时运行的回调函数。额外的参数： response - 包含来自请求的结果数据 status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"） xhr - 包含 XMLHttpRequest 对象

实例：把文件 "test.txt" 的内容加载到指定的 <div> 元素：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
</head>
<body>
	 <div id="div1"><h2>使用jQuery AJAX修改文本内容</h2></div>
	 <button>获取外部内容</button>
</body>
<script type="text/javascript">
	$(document).ready(function(){
		$("button").click(function(){
			$("#div1").load('test.txt')
		});
	});
</script>
</html>

2. jQuery val() 方法

定义和用法

val() 方法返回或设置被选元素的 value 属性。

当用于返回值时：
该方法返回第一个匹配元素的 value 属性的值。语法：$(selector).val()

当用于设置值时：
该方法设置所有匹配元素的 value 属性的值。语法：$(selector).val(value)

注意：val() 方法通常与 HTML 表单元素一起使用。

实例：设置 <input> 字段的值：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
</head>
<body>
	<p> 姓名: <input type="text" name="user"></p>
	<button>设置输入字段的值</button>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		$("button").click(function() {
			$("input:text").val("Alan Smith")
		})
	})
</script>
</html>

通过函数设置 value 属性：语法：$(selector).val(function(index -> 返回集合中元素的 index 位置。,currentvalue ->返回被选元素的当前 value。) )

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
</head>
<body>
	<p> 姓名: <input type="text" name="user" value="Peter"></p>
	<button>设置输入字段的值</button>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		$("button").click(function() {
			$("input:text").val(function(n,c) {
				return c + " Griffin";
			});
		});
	});
</script>
</html>

来源：oschina

链接：https://my.oschina.net/u/4225107/blog/3142689

标签

XHR

jquery