收藏
批改状态：合格
老师批语：
这一个主要讲的是jQuery中的Ajax操作，主要讲了load（）方法，$.get(),$.getJson,$.post()等函数的细说，以及三级联动的实战
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h3>用户注册</h3>
<p><label for="email">邮箱:</label><input type="email" id="email" name="email"></p>
<p><label for="password">密码:</label><input type="password" id="password" name="password"></p>
<p><button>注册</button></p>
<script src="lib/jquery.js"></script>
<script>
$('button').click(function(){
if ($('#email').val().length === 0) {
$('#email').after('<span style="color:red">邮箱不能为空</span>').next().fadeOut(2000);
$('#email').focus();
return false;
}
if ($('#password').val().length === 0) {
$('#password').after('<span style="color:red">密码不能为空</span>').next().fadeOut(2000);
$('#password').focus();
return false;
} else if($('#password').val().length < 6) {
$('#password').after('<span style="color:red">密码不能少于6位</span>').next().fadeOut(2000);
$('#password').focus();
return false;
}
$.post(
'inc/check.php',{
email: $('#email').val(),
password: $('#password').val()
},
function(data,status,xhr) {
console.log($(this));
if (data.status === 1) {
$('button')
.after('<span style="color: green"></span>')
.html(data.message)
.fadeOut(2000);
} else {
$('button')
.after('<span style="color: red"></span>')
.next()
.html(data.message)
.fadeOut(2000);
}
},
'json'
);
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
代表图
![@YD9XG~UXSES%UMYLF]%_`B.png](https://img.php.cn//upload/image/908/593/822/1537855171671362.png "1537855171671362.png")
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
省 <select name="" id="pro"></select>
市 <select name="" id="city"></select>
区 <select name="" id="area"></select>
<script src="lib/jquery.js"></script>
<script>
$(function(){
$.getJSON('inc/1.json',function(data){
let option = '<option value="">选择(省)</option>';
$.each(data,function(i){
option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
});
$('#pro').html(option);
});
$('#pro').change(function(){
console.log($(this).find(':selected').text());
$.getJSON('inc/2.json',function(data){
let option = '<option value="">选择(市)</option>';
$.each(data,function(i){
if (data[i].proId == $('#pro').val()) {
option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
}
});
$('#city').html(option);
});
});
$('#city').change(function(){
console.log($(this).find(':selected').text());
$.getJSON('inc/3.json',function(data){
let option = '<option value="">选择(县区)</option>';
$.each(data,function(i){
if (data[i].cityId == $('#city').val()) {
option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
}
});
$('#area').html(option);
});
});
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
预览图
总结
1、load()方法是jQuery中最简单的Ajax请求方法,默认为GET请求方式
2、$.get(),用于从服务器上读取内容
3、$.getJSON()专用于解析从服务器上返回的json格式的内容
4、$.post()用于向服务器发送大量的,敏感的信息
5、$.ajax()函数是jQuery中Ajax的底层实现,都在它基础实现的功能封装
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
