![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
1.$.post()实现用户注册
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用户登录$.post()</title>
</head>
<body>
<p>QQ:<input type="text" name="QQ" id="QQ"></p>
<p>密码:<input type="password" name="password" id="password"></p>
<button>提交</button>
</body>
<script src="../jquery.js"></script>
<script>
$('button').click(function(){
if($('#QQ').val().length === 0){
$('#QQ').after('<span>QQ不能为空</span>');
$('#QQ').focus();
return false;
}
if($('#password').val().length === 0){
$('#password').after('<span>密码不能为空</span>');
$('#password').focus();
return false;
}
//发送数据
$.post(
'inc/check.php',
{
QQ: $('#QQ').val(),
password: $('#password').val()
},
//成功之后的回调
function(data,status,xhr){
if(data.status === 1){
$('button')
.after('<span>登录成功</span>')
.next()
.fadeOut(2000);
}else{
$('button')
.after('<span>账号或密码错误</span>')
.next()
.fadeOut(2000);
}
},
'json'
);
})
</script>
</html>用ajax实现省/市/县三联下拉框联动查询功能
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
省<select name="" id="pro"></select>
市<select name="" id="city"></select>
区<select name="" id="area"></select>
<script src="../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(){
$.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(){
$.getJSON('inc/3.json',function(data){
let option='<option value="">请选择县</option>';
$.each(data,function(){
if(data[i].cityId == $('#city').val()){
option +='<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
}
});
$('#area').html(option);
});
})
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
个人总结：这次学了load(),$.post(),$.get(),$.getJSON(),个人觉得load()比较简单，而我用$.getJSON就经常出现各种错误。可能还是自己掌握的不牢固的原因吧。
