利用jQuery实现Ajax
1.注意
不了解 jQuery 的可以先了解一下，本站上也有一些 jQuery 的学习笔记
jQuery中的Ajax, 最底层$.ajax() 第二层$.load() $.get() $.post(), 第三层$.getScript() $.getJSON()
最常用的方法是$.load() $.get() $.post()
一.$.load()
load()方法是jQuery中最为简单和常见的Ajax方法, 能载入远程的HTML代码并插入到DOM中.
我们只需用jQuery选择器为HTML片段指定目标位置即可.
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式
如果我们只需要返回的全部HTML代码的一部分, 可以将url参数设置为"url selector"(注意url与选择器间有一个空格)
任何一个HTML的节点都可以使用load()方法来加载Ajax, 结果将直接插入到该节点中的innerHTML中
| 参数 |
说明 |
| url |
待装入 HTML 网页网址 |
| data(可选,对象) |
发送至服务器的 key/value 数据. 在jQuery 1.3中也可以接受一个字符串了. |
| callback(可选) |
载入成功时回调函数 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| <head>
<meta charset="UTF-8">
<title>exer</title>
<script src="js/jquery-3.4.0.min.js"></script>
<script type="text/javascript">
window.onload = function() {
$("a").click(function(){
var url = this.href;
$(".detail").load(url);
return false;
});
};
</script>
<style type="text/css">
.brief {
width: 200px;
margin: 0 auto;
}
.brief a{
font-size: 20px;
}
.detail {
width: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="brief">
<a href="sun.html">孙悟空</a>
<a href="zhu.html">猪八戒</a>
<a href="sha.html">沙和尚</a>
</div>
<div class="detail">
</div>
</body>
|
二.$.get()和$.post()
$.get()方法使用GET方式来进行异步请求. 结构: $.get(url[,data][,callback][,type])
$.get()方法中的回调函数只有两个参数: data表示返回的数据, 可以是XML、JSON、HTML等; textstatus表示请求状态, 其值可能是: success, error, notmodify, timeout 4种
请求成功时可调用回调函数, 如果需要在出错时执行函数, 请使用 $.ajax()
$.get()和$.post()方法是jQuery中的全局函数, 而find()等方法都是对jQuery对象进行操作的方法.
| 参数 |
描述 |
| url |
待载入页面的URL地址 |
| data |
待发送 Key/value 参数 |
| callback |
载入成功时回调函数 |
| type |
返回内容格式:xml, html, script, json, text, _default |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| <head>
<meta charset="UTF-8">
<title>index</title>
<script src="js/jquery-3.4.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
var url = this.href;
var args = {"time":new Date()};
$.get(url,args,function(data){
var name = $(data).find("name").text();
var website = $(data).find("website").text();
var address = $(data).find("address").text();
$(".detail").empty()
.append("<p>姓名:"+name+"</p>")
.append("<p>网址:<a href="+ website +" target='_blank'>简介</a></p>")
.append("<p>住址:"+address+"</p>");
});
return false;
});
});
</script>
<style type="text/css">
.brief {
width: 200px;
margin: 0 auto;
}
.brief a{
font-size: 20px;
}
.detail {
width: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="brief">
<a href="sun.xml">孙悟空</a>
<a href="zhu.xml">猪八戒</a>
<a href="sha.xml">沙和尚</a>
</div>
<div class="detail">
</div>
</body>
|
$.post()方法和$.get()方法类似, 但是若向本地服务器发送POST请求, 本地服务器需要具备处理POST请求的能力
