![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
用户登录:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./jquery.js"></script>
<title>$.post实现用户登录</title>
</head>
<body>
<h3>用户登录$.ajax()</h3>
<p><label for="name">用户名:</label><input type="name" id="name" name="name"></p>
<p><label for="password">密码:</label><input type="password" id="password" name="password"></p>
<p><button>提交</button></p>
<p id = "msg"></p>
<script type="text/javascript">
$(function(){
$('button').click(function(){
if($('#name').val().length == 0){
$('#msg').html('<font style="color:red">邮箱不能为空</font>')
return false
}
if($('#password').val().length == 0){
$('#msg').html('<font style="color:red">密码不能为空</font>')
return false
}
$.post(
//处理的php脚本url
'./handle.php',
//传送数据 格式为{name:value,}
{name:$('#name').val(),password:$('#password').val()},
//成功的回调函数 状态吗
function(data,status,xhr){
console.log(status)
if(status==='success'){
// console.log(status)
$('#msg').html(data.msg)
}
},
//选择传送数据
'json'
)
})
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
php:脚本：handle.php
<?php
$name = fn($_POST['name']);
$pwd = fn($_POST['password']);
$pdo = new PDO('mysql:host=localhost;dbname=test','abc','abc');
$sql = "SELECT count(*) FROM `user` WHERE `name`=:name AND `pwd`=:pwd";
$stmt = $pdo->prepare($sql);
$where['name'] = $name;
$where['pwd'] = $pwd;
$stmt->execute($where);
if($stmt->fetchColumn()){
$res=['status'=>1,'msg'=>"登陆成功"];
}else{
$res=['status'=>2,'msg'=>"用户名或密码失败"];
}
echo json_encode($res);
function fn($a){
return htmlspecialchars(trim($a));
}
?>点击 "运行实例" 按钮查看在线实例
地域三级联动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="./jquery-3.3.1.min.js"></script>
<title>三级联动</title>
<style>
select{width:80px;height:20px;line-height:20px}
</style>
</head>
<body>
<select name="pro" id="pro">pro</select>
<select name="city" id="city"></select>
<select name="area" id="area"></select>
<script>
$(function(){
$.getJSON('./pro.json',function(data){
let option = "<option>请选择省</option>"
$.each(data,function(i){
option += "<option value='"+data[i].id+"'>"+data[i].pro+"</option>"
})
$("#pro").html(option)
})
$('#pro').change(function(){
let upid = $(this).val()
let option=""
$.getJSON('./city.json',function(data){
$.each(data,function(i){
if(data[i].parentid == upid){
option += "<option value='"+data[i].id+"'>"+data[i].city+"</option>"
}
})
$("#city").html(option)
})
})
$('#city').change(function(){
let upid = $(this).val()
let option=""
$.getJSON('./area.json',function(data){
$.each(data,function(i){
if(data[i].parentid == upid){
option += "<option value='"+data[i].id+"'>"+data[i].area+"</option>"
}
})
$("#area").html(option)
})
})
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
