JQuery中的Ajax
方法
- load方法
- $.get和$.post方法
- $.ajax方法
- $.getScript方法和$.JSON方法
事件
- ajaxStart和ajaxStop
- ajaxComlete、ajaxSend、ajaxError、ajaxSuccess事件
load方法
$element.load(url,[data],[callback])
-
url
异步请求的地址
-
data
异步请求的数据.。如果传入参数那么请求方式为post,否则为get。请求数据为键值对形式。
-
callback
自动将返回结果写入到目标元素中
$('.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])
-
url
请求的地址
-
data
请求的数据。键值对形式。
-
callback
请求完成时的回调函数。会将请求数据的结果作为回调函数的参数传入。
-
type
设置返回数据内容的格式。值为xml、html、script、json、text和_default。
$('.btn').click(function () {
$.get('data/server1.json', { name: '666' }, function (backData) {
console.log(backData);
}, 'json')
})
ajax方法
$.ajax('data/server1.json', {
// 请求的类型
type: 'get',
// 请求的数据
data: {
name: '666'
},
// 服务器返回的数据类型
dataType: 'json',
// 响应成功时的回调函数
success: function (backData) {
console.log(backData);
}
})
getScript方法
$.getScript(url,[backcall])
$.getScript('data/server3.js', function () {
console.log('加载成功了');
})
获取成功后会自动调用获取的脚本js代码。
回调函数会返回脚本的字符串类型,可以通过eval函数进行调用。
getJSON
$.getJSON(url,[backcall])
$('.btn').click(function () {
$.getJSON('data/server1.json', function (data) {
console.log('加载成功了,返回数据为:', data);
})
})
请求方式为GET。
省市联动
<!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>
搜索框提示案例
<!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属性
<!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>