1. 加载一个文件,并更新HTML元素内容
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b01").click(function(){
$('#myDiv').load('/jquery/test1.txt');
});
});
</script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="b01" type="button">改变内容</button>
</body>
</html>
2.较原生的ajax
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b01").click(function(){
htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
$("#myDiv").html(htmlobj.responseText);
});
});
</script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="b01" type="button">改变内容</button>
</body>
</html>
3. 更多的函数
jQuery AJAX 请求
请求 | 描述 |
---|---|
$(selector).load(url,data,callback) | 把远程数据加载到被选的元素中 |
$.ajax(options) | 把远程数据加载到 XMLHttpRequest 对象中 |
$.get(url,data,callback,type) | 使用 HTTP GET 来加载远程数据 |
$.post(url,data,callback,type) | 使用 HTTP POST 来加载远程数据 |
$.getJSON(url,data,callback) | 使用 HTTP GET 来加载远程 JSON 数据 |
$.getScript(url,callback) | 加载并执行远程的 JavaScript 文件 |
(url) 被加载的数据的 URL(地址)
(data) 发送到服务器的数据的键/值对象
(callback) 当数据被加载时,所执行的函数
(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 请求的所有键/值对选项