Ajax提交表单数据应注意
程序员文章站
2022-07-12 18:09:20
...
关于Ajax提交数据
我们都知道，随着技术的不断发展，Ajax越来越深受开发者的喜爱，因为在开发web应用或者网站中，我们常常需要从数据库中动态加载数据到UI（用户界面），有可能需要实时动态地更新当前显示的内容。
就拿注册功能来说，用户在注册的时候就有必要通过数据库来对比检测用户输入的用户名是否存在，这样能保证用户名唯一，不重名。
当然Ajax是基于jQuery的，所以必须先引入jQuery库文件Jquery3.3.1.min.js
然后在我们jQuery引入之后开始编写我们的JavaScript，需要一个事件去触发验证，这里我用的是keyup事件。
需要注意的是：
1.尽量别写form标签，如果写了提交按钮的type一定不要设置成submit，设置成button，应为在你点击提交的时候，页面可能发生跳转，可能刷新本页（数据submit到本页了）。
2.Ajax的服务器响应地址是相对于HTML页面的不是相对于js文件。
3.Ajax如何报错的话可以在回调函数中输出status，如果status是0的话可能是地址写错了，或者是数据类型不匹配
4.建议使用json数据格式
废话少说，上代码，说实例：
目录
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/register.js" charset="UTF-8"></script>
<script type="text/javascript" src="layer/layer.js" charset="UTF-8"></script>
<link rel="stylesheet" href="css/reg.css" />
</head>
<body>
<!--注册-->
<form> <label>用户名：</label>
<div class="inputOuter2">
<input name="user" type="text" maxlength="16" id="user" class="inputstyle" />
</div>
<label for="passwd" class="input-tips2">密码：</label>
<div class="inputOuter2">
<input name="passwd" type="password" maxlength="16" id="passwd" class="inputstyle" />
</div>
<label for="passwd2" class="input-tips2">确认密码：</label>
<div class="inputOuter2">
<input name="passwd2" type="password" maxlength="16" id="passwd2" class="inputstyle" />
</div>
<div class="inputOuter2">
<input type="checkbox" checked="checked" name="xy" id="xy" /><a href="#">《用户协议》</a>
<input type="button" value="同意协议并注册" id="reg" class="button_blue" style="margin-top:10px;" />
</div>
</form>
<!--注册end-->
</body>
</html>
register.js
//表单验证开始
$(function () {
$name = $("#nickname"); //昵称
$user = $("#user"); //注册用户名
$pass = $("#passwd"); //注册密码
$repass = $("#passwd2"); //确认密码
$reg_btn = $("#reg"); //注册按钮
lage=0;//定义标记，检测用户名用
//按键弹起时判断用户名
$user.keyup(function () {
var reg = /^[\w]{5,12}$/;
var result = reg.exec($(this).val());
if ($(this).val()) {
if ($(this).val().length < 5) {
nextspan($(this), "用户名小于5个字符！", 1);
} else if ($(this).val().length > 12) {
nextspan($(this), "用户名大于12个字符！", 1);
} else
if (!result) {
nextspan($(this), "用户名不能有汉字、空格和符号！", 1);
} else {
//用户名格式合法
//nextspan($(this), "用户名不能为空", 0);
var username = $(this).val(); //获取用户输入的用户名
var act="checkUsername"
$.ajax({
type: "POST", //参数传递的方式（get/post）
url: "php/login.php", //服务器端的响应文件地址
data: { "username": username ,"act":act}, //参数
dataType: "json",
error:function(rs) {
alert("失败")
},
success: function (rs) { //如果回调函数为yes说明用户名已存在
//alert(rs['rs'])
if (rs['rs'] == 'yes')
{
nextspan($user, '用户名已被占用', 1);
lage=1;
$("#user").focus();
$("#reg").prop("disabled",true);//启用提交按钮
}
else if (rs['rs'] == 'no')
{
nextspan($user, '用户名可用', 0);
lage=0;//标记用户名是否被占用
$("#reg").prop("disabled",false);//启用提交按钮
}
}
});
}
} else {
nextspan($(this), "用户名为5-12位数字、字母下划线组合", 0);
}
})
//按键谈起时判断密码
$pass.keyup(function () {
var reg = /^[a-zA-Z0-9]{6,12}$/;
var result = reg.exec($(this).val());
if ($(this).val()) {
if ($(this).val().length < 6 || $(this).val().length > 12) {
nextspan($(this), "密码长度应为为6-12位！", 1);
}else
if (!result) {
nextspan($(this), "密码格式错误！", 1);
} else {
nextspan($(this), "密码可用", 0);
}
} else {
nextspan($(this), "密码为6-12位数字、字母组合", 0);
}
})
//按键弹起时 验证两次密码是否一致
$repass.keyup(function () {
if ($pass.val() != $repass.val()) { //密码与确认密码是否相等
nextspan($repass, "密码不一致", 1);
} else {
nextspan($repass, "确认密码正确", 0);
}
})
$reg_btn.click(function () { //提交时 所有验证通过时 执行if内的语句
if (check()) {
ShowMsg($user,"正在创建新用户……",2,1000);
$.post("php/reg.php",{username:$user.val().trim(),pwd:$pass.val().trim()},function(rs){
if (rs['rs'] == 'yes')
{
ShowMsg($user,"注册成功，可以去登录了",2,1000);
location.href="index.html";
}
else if(rs['rs'] == 'no')
{
ShowMsg($user,"注册失败，请重试或联系管理员",2,1000);
}
},"json")
}
})
//用户名验证 5-9位 字母数字及下划线
var reName = /^[\w]{5,12}$/;
//密码验证 6-16位 字母数字及下划线
var rePass = /^[a-zA-Z0-9]{6,16}$/;
/**
* 验证输入是否正确的函数
*/
function check() {
if($user.val()){
if (!reName.test($user.val())) { //用户名格式验证
//nextspan($user, "用户名格式错误！", 1, 1);
ShowMsg($user,"用户格式错误",2,1000);
return false;
} else if(lage==1){
//nextspan($user, "输入5-12位的英文数字组合", 0);
nextspan($user, '用户名已被占用', 1);
return false;
}
}else{
//nextspan($user, "用户名不能为空！", 1, 1);
ShowMsg($user,"用户名不能为空!",2,1000);
return false;
}
if (rePass.test($pass.val())) { //密码格式验证
//nextspan($pass, "输入6-16位的数字、字母组合", 0);
} else {
//nextspan($pass, "密码格式错误！", 1, 1);
ShowMsg($pass,"密码格式错误!",2,1000);
return false;
}
if ($pass.val() != $repass.val()) { //检查两次密码是否一致
//nextspan($repass, "密码不一致！", 1, 1);
ShowMsg($repass,"密码不一致!",2,1000);
return false;
} else {
// nextspan($repass, "重复密码正确", 0);
}
//验证是否勾选协议
if(!$('#xy').is(':checked')) {
ShowMsg($user,"没同意用户协议!",2,1000);
return false;
}
//所有验证通过时 返回true 用于判断
return true;
}
var $UserName=$("#UserName");
$Password=$("#PassWord");
$UserName.keyup(function () {
if($(this).val().length<5){
nextspan($(this), "用户名小于5位！", 1);
} else{
nextspan($(this), "OK！用户名格式正确", 0);
}
});
/**
* @param {Object} obj 要提示错误的对象
* @param {String} msg 错误的信息
* @param {ColorString} a 红色或蓝色提示TRUE红色FALSE蓝色
* 需要布局
* author stonefly
*/
function nextspan(obj, msg, a) {
$(obj).focus();
var color= a?"#ff0000":"#339933";
layer.tips(msg,obj,{
tips:[2,color],
//time:500
});
}
/**
*
* @param {string} msg 提示信息
* @param {Number} 图标
* @param {Timed} 显示时间
* @param {Object} obj
*/
function ShowMsg(obj,msg,ic,time){
$(obj).focus();
layer.msg(msg,{
icon:ic,
//skin:'layer-ext-moon',
time:time
})
}
})login.php<?php
session_start();
include "conn.php";
$dbh=connDB();
//判断客户是通过post还是get方式发送数据
$act=$_REQUEST['act'];
//检查用户名
if($act=="checkUsername")
{
[email protected]$_REQUEST['username'];
$sql="select * from user where username ='$username'";
$rs=$dbh->query($sql)->fetchAll();
$returnValue=count($rs)==0?"no":"yes";
echo(json_encode(array("rs"=>$returnValue)));
}
//检查用户名密码
else if($act=="login")
{
$username=$_POST['username'];
$pwd=$_POST['userpwd'];
$sql="select * from user where username ='$username' and userpwd='$pwd'";
$rs=$dbh->query($sql)->fetchAll();
$returnValue=(count($rs)==0?"no":"yes");
if($returnValue=="yes")
$_SESSION['username']=$username;
echo(json_encode(array("rs"=>$returnValue,"sql"=>$sql)));
}
//检查是否登录
else if($act=="checkStatus")
{
if(isset($_SESSION['username']))
echo(json_encode(array("rs"=>$_SESSION['username'])));
else
echo(json_encode(array("rs"=>"no")));
}
?>conn.php
<?php
function connDB()
{
$dbh=new PDO("mysql:host=localhost;dbname=你的数据库名","用户名","密码");
$dbh->query("set names utf8");
return ($dbh);
}
?>上一篇： JSON AJAX提交表单数据
下一篇： jquery ajax提交表单数据
推荐阅读