JQuery中的Ajax
方法
- load方法
- $.get和$.post方法
- $.ajax方法
- $.getScript方法和$.JSON方法
事件
- ajaxStart和ajaxStop
- ajaxComlete、ajaxSend、ajaxError、ajaxSuccess事件
load方法
$element.load(url,[data],[callback])
1
2
3
4
5
| $('.btn').click(function () {
$('button').load('data/server2.txt', { name: '123' }, function () {
console.log('success');
})
})
|
此方法会自动将请求结果写入到调用元素中。
get与post方法
$.get(url,[data],[callback],[type])与$.post(url,[data],[callback],[type])
1
2
3
4
5
| $('.btn').click(function () {
$.get('data/server1.json', { name: '666' }, function (backData) {
console.log(backData);
}, 'json')
})
|
ajax方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| $.ajax('data/server1.json', {
type: 'get',
data: {
name: '666'
},
dataType: 'json',
success: function (backData) {
console.log(backData);
}
})
|
getScript方法
$.getScript(url,[backcall])
1
2
3
| $.getScript('data/server3.js', function () {
console.log('加载成功了');
})
|
获取成功后会自动调用获取的脚本js代码。
回调函数会返回脚本的字符串类型，可以通过eval函数进行调用。
getJSON
$.getJSON(url,[backcall])
1
2
3
4
5
| $('.btn').click(function () {
$.getJSON('data/server1.json', function (data) {
console.log('加载成功了,返回数据为：', data);
})
})
|
请求方式为GET。
省市联动
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<select id="province"></select>
<select id="city">
<option value="">---</option>
</select>
<select id="county">
<option value="">---</option>
</select>
<script>
var $province = $('#province')
var $city = $('#city')
var json
$.getJSON('data/server1.json', function (data) {
$.each(data, function (index, obj) {
json = data
var provinceName = obj.province
$province.append(`<option value="${provinceName}">${provinceName}</option>`)
})
$province.bind('change', function () {
$city.empty()
$city.append(`<option value="">----</option>`)
var provinceElementName = $(this).children('option:selected').text()
$.each(json, function (index, obj) {
var provinceName = obj.province
if (provinceElementName === provinceName) {
var cities = obj.cities
$.each(cities, function (index, obj) {
var cityName = obj.city;
$city.append(`<option value="${cityName}">${cityName}</option>`)
})
}
})
})
})
</script>
</body>
</html>
|
搜索框提示案例
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
49
50
51
52
53
54
55
56
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.container #search {
width: 300px;
}
.container .alert {
width: 300px;
border: 1px solid lightgray;
display: none;
}
.container .alert ul {
list-style: none;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="search">
<div class="alert">
<ul class="tip">
<li>前端666</li>
<li>前端666</li>
</ul>
</div>
</div>
<script>
$('#search').bind('input', function (e) {
var inputValue = $(this).val()
$.getJSON('data/server4.json', function (data) {
$('.tip').empty()
$.each(data, function (index, obj) {
console.log(index, obj);
if (index === inputValue) {
$('.alert').show()
$.each(obj, function (i, o) {
$('.tip').append(`<li>${o}</li>`)
})
}
})
})
})
</script>
</body>
</html>
|
异步提交表单的步骤
- 获取表单组件的内容
- 根据表单数据构建请求数据
- 通过Ajax异步提交
表单序列化
serialize()方法
将表单组件对应的数据值序列化为指定格式的字符串内容。
serializeArray()方法
将表单组件对应的数据值序列化为JSON格式的数据内容。
表情需对需要获取的值设置name属性
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form action="#">
<input type="text" name="search">
<button type="submit">Submit</button>
</form>
<script>
$('button').on('click', function (e) {
e.preventDefault()
var data1 = $('form').serialize()
var data2 = $('form').serializeArray()
console.log(data1);
console.log(data2);
})
</script>
</body>
</html>
|
