收藏
批改状态：未批改
老师批语：
PHP使用ajax无刷新注册再次使用$.post 发送与接收数据。使用if和switch语句进行判断输出结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实例：php来处理表单</title>
<style type="text/css">
table {
background-color: lightgreen;
box-shadow: 5px 5px 5px #888;
border-radius: 15px;
padding: 15px;
margin: 50px auto;
}
table td{
padding: 8px;
}
table caption {
font-size: 1.5em;
margin-bottom: 10px;
}
textarea {
resize: none;
}
form button{
width: 100px;
height: 30px;
border:none;
background-color:skyblue;
color:white;
}
form button:hover{
background-color: orange;
font-size: 1.2em;
cursor:pointer;
}
input{
background-color: skyblue;
border-radius: 10px;
padding: 10px;
}
</style>
</head>
<body>
<form id="register">
<table>
<caption>用户注册</caption>
<tr>
<td><label for="email">邮箱</label></td>
<td><input type="text" name="name" id="email" autofocus=""></td>
</tr>
<tr>
<td><label for="password1">密码</label></td>
<td><input type="password" name="password1" id="password1" ></td>
</tr> <tr>
<td><label for="password2">确认密码</label></td>
<td><input type="password" name="password2" id="password2" ></td>
</tr>
<tr>
<td><label for="secret">性别</label></td>
<td><input type="radio" name="gender" id="male" value="male"> <label for="male">男</label>
<input type="radio" name="gender" id="female" value="female"> <label for="female">女</label>
<input type="radio" name="gender" id="secret" value="secret" checked=""> <label for="secret">保密</label></td>
</tr>
<tr>
<td><label for="level">级别</label></td>
<td> <select name="level" id="level">
<option value="0">初级</option>
<option value="1" selected="">中级</option>
<option value="2">高级</option>
</select></td>
</tr>
<tr>
<td><label>语言</label></td>
<td><input type="checkbox" name="lang[]" id="php" value="php" checked=""><label for="php">php</label>
<input type="checkbox" name="lang[]" id="java" value="java" ><label for="java">java</label>
<input type="checkbox" name="lang[]" id="python" value="python" ><label for="python">python</label>
<input type="checkbox" name="lang[]" id="java" value="java" ><label for="java">java</label></td>
</tr>
<tr>
<td><label for="comment">简介</label></td>
<td><textarea name="comment" id="comment" rows="3" cols="30"></textarea></td>
</tr>
<tr>
<td colspan="2"><button type="button" name="submit" id="submit">提交</button></td>
</tr>
</table>
</form>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
//所有的表单数据验证全部使用ajax完成请求类型为post但是为了代码的简洁和可读性操作类型使用get
$('#email').blur(function(){
$.post(
'admin/check.php?check=email',
'email='+$('#email').val(),
function(data){
switch(data.status){
case 0:
$('td').find('span').remove()
$('#email').after('<span>').next().text(data.msg).css('color','red').prev().focus()
break;
case 1:
$('td').find('span').remove()
$('#email').after('<span>').next().text(data.msg).css('color','red').prev().focus()
break;
case 2:
$('td').find('span').remove()
$('#email').after('<span>').next().text(data.msg).css('color','green')
break;
}
},'json')
})
//验证密码
$('#password1').blur(function(){
if ($('#email').val().length == 0) {
return false
}
$.post(
'admin/check.php?check=password1',
'password1='+$('#password1').val(),
function(data){
if (data.status ==0) {
$('td').find('span').remove()
$('#password1').after('<span>').next().text(data.msg).css('color','red')
}
},'json')
})
//验证密码
$('#password2').blur(function(){
if ($('#email').val().length == 0 || $('#password1').val().length == 0) {
return false
}
$.post(
'admin/check.php?check=password2',
{
password1: $('#password1').val(),
password2: $('#password2').val()
},
function(data){
switch(data.status){
case 0:
$('td').find('span').remove()
$('#password2').after('<span>').next().text(data.msg).css('color','red').prev().focus()
break;
case 1:
$('td').find('span').remove()
$('#password2').after('<span>').next().text(data.msg).css('color','red')
break;
case 2:
$('td').find('span').remove()
$('#password2').after('<span>').next().text(data.msg).css('color','green')
break;
}
},'json')
})
// 验证文本框
$('#comment').blur(function(){
if ($('#email').val().length == 0 || $('#password1').val().length == 0 ||$('#password2').val().length == 0) {
return false
}
$.post(
'admin/check.php?check=comment',
'comment='+$('#comment').val(),
function(data){
switch(data.status){
case 0:
$('td').find('span').remove()
$('#comment').after('<span>').next().text(data.msg).css('color','red').prev().focus()
break;
case 1:
$('td').find('span').remove()
$('#comment').after('<span>').next().text(data.msg).css('color','red')
break;
case 2:
$('td').find('span').remove()
$('#comment').after('<span>').next().text(data.msg).css('color','green')
break;
}
},'json')
})
//提交验证
$('#submit').click(function(){
$.post('admin/check.php?check=submit',
'submit='+$('#register').serialize(),
function(data){
alert(data)
})
})
</script>
</body>
</html>使用$_GET方式进行验证，if和switch语句进行判断输出，结果进行json_encode输出
<?php
// echo '<pre>';
// print_r($_POST);
// echo $_GET['check'];
switch ($_GET['check']) {
//验证邮箱
case 'email':
$email = $_POST['email'];
if(empty($email)){
exit(json_encode(['status'=>0,'msg'=>'邮箱不能为空']));
}else if(in_array($email,['admin@php.cn','wo@gmail.com'])){
exit(json_encode(['status'=>1,'msg'=>'邮箱已占用']));
}else {
exit(json_encode(['status'=>2,'msg'=>'邮箱可以用']));
}
break;
//验证密码
case 'password1':
$pwd1 = $_POST['password1'];
if(empty($pwd1)){
exit(json_encode(['status'=>0,'msg'=>'密码不能为空']));
}
break;
//验证确认密码
case 'password2':
$pwd1 = $_POST['password1'];
$pwd2 = $_POST['password2'];
if (empty($pwd2)) {
exit(json_encode(['status'=>0,'msg'=>'密码不能为空']));
}else if($pwd1 != $pwd2){
exit(json_encode(['status'=>1,'msg'=>'两次密码不相同']));
}else{
exit(json_encode(['status'=>2,'msg'=>'验证通过']));
}
break;
//验证文本框
case 'comment':
$cmt = $_POST['comment'];
if (empty($cmt)) {
exit(json_encode(['status'=>0,'msg'=>'不能为空']));
}else if(mb_strlen(trim($cmt) <= 20)){
exit(json_encode(['status'=>1,'msg'=>'不能少于20个字符']));
}else{
exit(json_encode(['status'=>2,'msg'=>'验证通过']));
}
break;
case 'submit':
{ exit('恭喜，注册成功');}
}
?>执行结果如下图
总结： 1.经过此次的书写，对$.post() 和switch等语句有了更进步的掌握和熟练运用，$.post()返回方式使用text或者json输出不能忘记书写。
2，ajax对于无刷新注册提交数据，得到了更深入的体会。
3，表单验证使用来说要加强书写，结束完语句要有分号（；）标志，不能忘记。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
