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个处 ...
随机推荐
- debug注意事项
1 先看关键代码是否正确,然后查一遍是否有变量名打错. 2 再看初始化有没有问题 3 再把范围开大和开int64(这应该刚开始看题就要注意,在不爆内存的情况下开int64) 4 静态调试,输出中间值. ...
- 初见spark-01
今天我们来学习spark,spark是一种快速,通用,可扩展的大数据分析引擎,现已成为Apache顶级项目,Spark是MapReduce的替代方案,而且兼容HDFS,Hive,可融入Hadoop的生 ...
- 4 Django简介
MVC与MTV模型 MVC Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的.松耦合的方式连接在一起,模型负责业务 ...
- 11.1，nginx集群概念
集群介绍 为什么要用集群
- 【转】正则表达式速查表（http://www.jb51.net/shouce/jquery1.82/regexp.html）
正则表达式速查表 字符 描述 \ 将下一个字符标记为一个特殊字符.或一个原义字符.或一个向后引用.或一个八进制转义符.例如,“n”匹配字符“n”.“\n”匹配一个换行符.串行“\\”匹配“\”而“\( ...
- hive原理
什么是Hive Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供类SQL查询功能. Hive架构图 Jobtracker是hadoop1.x中的组件,它的 ...
- 以+scheduledTimerWithTimeInterval...的方式触发的timer，在滑动页面上的列表时，timer会暂定回调，为什么？如何解决？
这里强调一点:在主线程中以+scheduledTimerWithTimeInterval...的方式触发的timer默认是运行在NSDefaultRunLoopMode模式下的,当滑动页面上的列表时, ...
- Intellij 设置只更新静态文件（js、view、css）的方法
1.打开 Tomcat Run/Debug configuration 2.打开Deployment标签 3.在“Deploy at Server Startup” 中,移出现有的.war 包 4.点 ...
- appium-手势密码实现-automationName 是automator2
上一篇博客已经说了 appium-手势密码实现-automationName 是Appium的情况 下面就说一下automator2的情况: 手势密码的moveTo方法的参数进行了改变. 参数是相对于 ...
- 一个初学者的辛酸路程-jQuery
前言: 主要概要: 1.HTML+CSS补充 2.DOM事件 3.jQuery示例 内容概要: 1.布局 代码如下 <!DOCTYPE html> <html lang=" ...