方法
事件
$element.load(url,[data],[callback])
$('.btn').click(function () {
$('button').load('data/server2.txt', { name: '123' }, function () {
console.log('success');
})
})
此方法会自动将请求结果写入到调用元素中。
.get(url,[data],[callback],[type])与.post(url,[data],[callback],[type])
$('.btn').click(function () {
$.get('data/server1.json', { name: '666' }, function (backData) {
console.log(backData);
}, 'json')
})
$.ajax('data/server1.json', {
// 请求的类型
type: 'get',
// 请求的数据
data: {
name: '666'
},
// 服务器返回的数据类型
dataType: 'json',
// 响应成功时的回调函数
success: function (backData) {
console.log(backData);
}
})
$.getScript(url,[backcall])
$.getScript('data/server3.js', function () {
console.log('加载成功了');
})
获取成功后会自动调用获取的脚本js代码。 回调函数会返回脚本的字符串类型,可以通过eval函数进行调用。
$.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>
表情需对需要获取的值设置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>