用户登录:
实例
<!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>运行实例 »
点击 "运行实例" 按钮查看在线实例
