CRainyDay

利用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;
//var url = this.href + " a";//只选择返回的html代码中的a
//var args = {"time":new Date()};//args为JSON格式
//若向本地服务器发送POST请求时,本地服务器需要具备处理POST请求的能力
$(".detail").load(url);//get请求
//$(".detail").load(url,args);//post请求
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){
//现在的$.get()方法会根据url识别data格式,此处为xml
//用$(data)包装data,变为jQuery对象
//若data为json格式,这样用:var name = data.person.name;
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>");
});//为了明确,建议在第四个参数处指明返回数据的格式,例:"json"
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请求的能力

 评论



本博客所有文章除特别声明外,均采用[(CC BY-NC-SA 4.0)]许可协议。转载请注明出处!

本站使用 Material X 作为主题 , 总访问量为 次 。
Copyright © 2019 CRainyDay's Blog 版权所有