ajax验证前端页面
1.html页面
用ajax验证表单的时候不需要form标签，并把提交按钮由type=“submit ”改为type=“button”
数据表结构
ajax.html
<!DOCTYPE html>
<html>
<head>
<title>注册</title>
<meta charset="UTF-8" />
<script src="https://weui.io/zepto.min.js"></script>
<!--
请在谷歌浏览器中运行，因为我引入的juery文件只有在谷歌上显示关于jquery的代码结果；
所以你也可以使用自己的jquery文件在其他浏览器运行
ajax验证
-->
<script type="text/javascript">
$(function() {
$('#sub').click(function() {
//获取id=username的input的值赋给变量username
//<input>标签用 .val()
var username = $('#username').val();
var pass1 = $('#pass1').val();
var pass2 = $('#pass2').val();
//判断信息
if (username == "") {
alert("用户名为空");
return false;
}
if (pass1 == "") {
alert("密码为空");
return false;
}
if (pass2 == "") {
alert("确认密码为空");
return false;
}
if (pass1 != pass2) {
alert("两次密码不一致");
return false;
}
//ajax验证 与后台交互数据
$.ajax({
type: "POST", //提交方式
url: "ajaxtest.php", //提交到哪个页面处理
dataType: "json", //数据类型：json类型
data: { //名称：值。
username: username, pass1: pass1,
pass2: pass2
},
success: function(data) {//这里的data是后台 ajaxtest.php 传过来的 :die(json_encode($data))
if (data.code == ) {
alert(data.msg);
} else {
alert(data.msg);
}
},
});
});
});
</script>
</head>
<body>
<div>
<div>
<div>
<label>用户名</label>
</div>
<div>
<input id="username" type="text" placeholder="请输入用户名号" name="username">
</div>
</div>
<div>
<div>
<label>密码</label>
</div>
<div>
<input type="password" id="pass1" value="" name="pass1">
</div>
</div>
<div>
<div>
<label>确认密码</label>
</div>
<div>
<input type="password" value="" id="pass2" placeholder="" name="pass2">
</div>
</div>
</div>
<div>
<input type="button" name="sub" id="sub" value="注册" />
</div>
</body>
</html>
2 处理数据php页面
ajaxtest.php
<?php
require ("ajaxdb.php");//数据库处理函数
$db = new Mysql("localhost", "root", "", "userdb");//连接自己的数据库
if (isset($_POST["username"])&&isset($_POST["pass1"])&&isset($_POST["pass2"])) {
//获取表单数据
$username = $_POST["username"];
$pass1 = $_POST["pass1"];
$pass2 = $_POST["pass2"];
define("SEL", "where username='$username'");//把sql语句常量化
define("TABLENAME", "user_zhuce");
define("COLE", "(username,password,password2)");
//信息是否为空
if(!$db -> isnull($username, $pass1, $pass2)){
$data=array(
"code"=>, //code：错误码。0错1对
"msg"=>"参数为空", //msg：信息
);
die(json_encode($data)) ; //返回json格式的数据，在ajax.html页面中 dataType="json";
}
//密码是否一致
if(!$db -> issame($pass1, $pass2)){ //密码不一致
$data=array(
"code"=>,
"msg"=>"两次密码不一致",
);
die(json_encode($data)) ; }else{
//查询是否有相同的用户名
$sel = $db -> select(TABLENAME, SEL);
$row = $db -> row($sel);
$r1 = $row[];
if ($r1 == ) {
$data=array(
"code"=>,
"msg"=>"用户重名",
);
die(json_encode($data)) ;
} //插入用户信息，uesrname,password,password2
$insert = $db -> insert(TABLENAME, COLE, DATEE);
//查询是否插入了该条信息，就是检查数据库中是否已存在
$sel = $db -> select(TABLENAME, SEL);
$row = $db -> row($sel);
$r2 = $row[];
if ($r2 != ) {
$data=array(
"code"=>,
"msg"=>"注册失败",
);
die(json_encode($data)) ;
} $db -> dbClose(); }
//执行到这里时说明前面的代码已经执行完了，没有错误，可以返回正确信息
$data=array(
"code"=>,
"msg"=>"注册成功",
);
die(json_encode($data));
}
?>
3 数据库处理页面
ajaxdb.php
<?php
header("content-type:text/html;charset=utf-8");
class Mysql {
private $host;
//服务器地址
private $root;
//用户名
private $password;
//密码
private $database;
//数据库名 //通过构造函数初始化类
function Mysql($host, $root, $password, $database) {
$this -> host = $host;
$this -> root = $root;
$this -> password = $password;
$this -> database = $database;
$this -> connect();
}
function connect() {//连接
$this -> conn = mysql_connect($this -> host, $this -> root, $this -> password);
mysql_select_db($this -> database, $this -> conn);
mysql_query("set names utf8");
}
function dbClose() {//关闭
mysql_close($this -> conn);
}
function query($sql) {
return mysql_query($sql);
}
function row($result) {
return mysql_fetch_row($result); }
function select($tableName, $condition) {
return $this -> query("SELECT COUNT(*) FROM $tableName $condition");
} function insert($tableName, $fields, $value) {
$this -> query("INSERT INTO $tableName $fields VALUES$value");
} function isnull($input1,$input2,$input3){
if($input1==""||$input2==""||$input3==""){
return false;
}else{
return true;
}
}
function issame($password1,$password2){
if($password1!=$password2){
return false;
}else{
return true;
}
} }
?>
ajax验证前端页面的更多相关文章
- jquery验证前端页面
一共三个页面 jquery.html文件(前端页面,jquery验证用户信息) jquerytest.php文件(后台处理页面) jquerydb.php文件(数据库) 数据表结构 jquery.ht ...
- javascript验证前端页面
数据表结构 1.html页面 <!DOCTYPE html> <html> <head> <title>注册</title> <met ...
- Ajax 填充 前端页面
- 本博文将一步步带领你实现抽屉官网的各种功能：包括登陆、注册、发送邮箱验证码、登陆验证码、页面登陆验证、发布文章、上传图片、form验证、点赞、评论、文章分页处理以及基于tronado的后端和ajax的前端数据处理。
本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tronado的后端和ajax的 ...
- javaweb实现注册页面（数据库连接以及ajax验证）
先放效果图 可实现js实时验证 可实现ajax实时验证注册信息是否存在 页面实现要求 1登录账号:要求由6到12位字母.数字.下划线组成,只有字母可以开头:(1分) 2登录密码:要求 ...
- 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
- 使用原生ajax访问后台数据并将其展现在前端页面中（小菜鸟自己整理玩的，大神勿喷）
首先你要有php的环境,关于php环境的搭建,php本地站点的搭建,此处不再重复请看这里:http://www.cnblogs.com/Gabriel-Wei/p/5950465.html我们把wam ...
- Ajax.ActionLink打开页面之后,表单验证失效
这两天遇到这个问题搞了很久,原因是验证插件默认是在页面初始化时初始化,ajax调用导致页面不会初始化,所以验证插件也没有初始化.解决方案如下 @Ajax.ActionLink("Edit&q ...
- ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
随机推荐
- 适合pc端的移动拖拽，分享一下。
h5新加的特性拖拽事件,但是只适合PC端哦.不多说了上代码 <!DOCTYPE html> <html> <head> <title></titl ...
- 笔记-python-standard library-11.2 os.path
笔记-python-standard library-11.2 os.path 1. os.path Source code: Lib/posixpath.py (for POSIX), L ...
- python Re库的介绍
re库的贪婪匹配和最小匹配 后面跟着?变为最小匹配
- Android弹出输入提示框--PopupWindow实现
前言 之前直接用Dialog实现了弹出对话框.现在尝试用更好地解决方案--PopupWindow类--来实现 1.首先搞一个弹出框布局,和之前类似. 这样的东西,它的布局是这样: 1 <?xm ...
- bitset学习
bitset是个好东西.嗯.贼sao~ 很早就讲过但是我并没有弄懂.(现在也不敢说明白) 首先bitset是有常数的,而且常数并不能忽略不计——$(\frac{1}{32})$ 目前我也只是会bits ...
- c语言的左移、右移
先说左移,左移就是把一个数的所有位都向左移动若干位,在C中用<<运算符.例如: int i = 1; i = i << 2; //把i里的值左移2位 也就是说,1的2进制是0 ...
- 在ddms 里面查看data/data里面的东西 不显示data/data
今天我要查看data/anr/tarces.txt,没办法,我只有root手机. 可是root之后,我发现还是不能查看或者导出traces.txt. 后来我才知道,root之后,文件夹权限没有变,所以 ...
- Apache 多端口配置方法
首先修改httpd.conf配置文件. 添加8080端口 Listen 8080 打开虚拟配置文件 # Virtual hosts Include conf/extra/httpd-vhosts.co ...
- ASP.NET Core ---异常处理
一.局部异常处理: 在Action里面catch 二.全局异常处理: 1.默认的异常处理配置: 默认配置在StartUp文件的Configure中注册错误处理,显示开发者错误页面: public vo ...
- Python的HttpClient实现
Python版本3.4(注意python的版本,python2和python3的写法不一样) 其实无非就是客户端的请求,所以python中这里使用的是urllib.request模块.主要注意的是he ...