1、 $.post()实现用户注册
实例 数据库校验
<?php
$email = htmlspecialchars(trim($_POST['email']));
//$password = sha1(htmlspecialchars(trim($_POST['password'])));
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');
$sql = "SELECT COUNT(*) FROM `user` WHERE `email`= :email";
$stmt = $pdo ->prepare($sql);
$stmt ->execute(['email'=>$email]);
if ($stmt ->fetchColumn(0) == 1){
$status = 1;
$msg = '该邮箱已存在,请换一个!';
}else{
$status = 0;
$msg = '恭喜你,该邮箱可以使用!';
}
echo json_encode(['status'=>$status,'message'=>$msg]);实例 用户注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.post()实现用户注册</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="../jquery.js"></script>
<script >
$('#email').blur(function () {
$.post('lib/login.php',
{email: $('#email').val(),password: $('#password').val()},
function(data) {
if (data.status === 1) {
$('#email')
.after('<span style="color:red"></span>')
.next()
.html(data.message)
.fadeOut(3000);
} else {
$('#email')
.after('<span style="color:green"></span>')
.next()
.html(data.message)
.fadeOut(3000);
}
},
'json'
);
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、用ajax实现省/市/县三联下拉框联动查询功能
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
</head>
<body>
<div>
省: <select name="pro" id="pro"></select>
市: <select name="city" id="city"></select>
区县: <select name="area" id="area"></select>
</div>
<script src="../jquery.js"></script>
<script>
$(function () {
$.getJSON('lib/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('lib/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('lib/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>运行实例 »
点击 "运行实例" 按钮查看在线实例