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验证前端页面的更多相关文章

  1. jquery验证前端页面

    一共三个页面 jquery.html文件(前端页面,jquery验证用户信息) jquerytest.php文件(后台处理页面) jquerydb.php文件(数据库) 数据表结构 jquery.ht ...

  2. javascript验证前端页面

    数据表结构 1.html页面 <!DOCTYPE html> <html> <head> <title>注册</title> <met ...

  3. Ajax 填充 前端页面

  4. 本博文将一步步带领你实现抽屉官网的各种功能:包括登陆、注册、发送邮箱验证码、登陆验证码、页面登陆验证、发布文章、上传图片、form验证、点赞、评论、文章分页处理以及基于tronado的后端和ajax的前端数据处理。

    本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tronado的后端和ajax的 ...

  5. javaweb实现注册页面(数据库连接以及ajax验证)

    先放效果图 可实现js实时验证        可实现ajax实时验证注册信息是否存在   页面实现要求 1登录账号:要求由6到12位字母.数字.下划线组成,只有字母可以开头:(1分) 2登录密码:要求 ...

  6. 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  7. 使用原生ajax访问后台数据并将其展现在前端页面中(小菜鸟自己整理玩的,大神勿喷)

    首先你要有php的环境,关于php环境的搭建,php本地站点的搭建,此处不再重复请看这里:http://www.cnblogs.com/Gabriel-Wei/p/5950465.html我们把wam ...

  8. Ajax.ActionLink打开页面之后,表单验证失效

    这两天遇到这个问题搞了很久,原因是验证插件默认是在页面初始化时初始化,ajax调用导致页面不会初始化,所以验证插件也没有初始化.解决方案如下 @Ajax.ActionLink("Edit&q ...

  9. ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

随机推荐

  1. gcc常用命令

    1简介 2简单编译 2.1预处理 2.2编译为汇编代码(Compilation) 2.3汇编(Assembly) 2.4连接(Linking) 3多个程序文件的编译 4检错 5库文件连接 5.1编译成 ...

  2. is 和 == 的区别,utf和gbk的转换,join用法

    is 和 == 的区别 # is 比较的是内存地址 # == 比较的是值 a = 'alex' b = 'alex' #int,str(小数据池)会被缓存,为了节约内存 print(id(a),id( ...

  3. P2341 [HAOI2006]受欢迎的牛(tarjan+缩点)

    P2341 [HAOI2006]受欢迎的牛 题目描述 每头奶牛都梦想成为牛棚里的明星.被所有奶牛喜欢的奶牛就是一头明星奶牛.所有奶 牛都是自恋狂,每头奶牛总是喜欢自己的.奶牛之间的“喜欢”是可以传递的 ...

  4. samba server on Mac OS X Lion Server

    一般Mac共享通过配置wins,smb即可实现.注意在同一个工作组! 参考:http://computers.tutsplus.com/tutorials/how-to-set-up-an-smb-s ...

  5. 有关ViewFlipper的使用及设置动画效果的讲解

    说到左右滑动,其实实现左右滑动的方式很多,有ViewPaer,自定义实现Viewgroup,gallery等都可以达到这种效果.这里做下ViewFliper实现左右滑动的效果. 会用到以下的技术: 1 ...

  6. 剑指Offer - 九度1366 - 栈的压入、弹出序列

    剑指Offer - 九度1366 - 栈的压入.弹出序列2014-02-05 20:41 题目描述: 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所 ...

  7. 《数据结构》C++代码 栈与队列

    线性表中,先进先出的叫队列,先进后出的叫栈.队列常用于BFS,而在函数递归层数过高时,需要手动实现递归过程,这时候便需要写一个“手动栈”. 有时候,我们会有大量数据频繁出入队列,但同时存在其内的元素却 ...

  8. windows 下开发的 .netCore MVC 部署到 Linux(Mint)

    这两天在公司跟同事偶然聊到 .netCore,说到一些趋势什么的.但是说来说去自己也没试过在Linux 机子上部署过,所以就试一下. 尝试之前也在网上看了一些文章,包括 Linux 上.netCore ...

  9. python之while/for循环

    一.while循环 (一)循环语句 while 后面接判断语句,在返回结果时有以下几种语句: 1.break 仅适用于循环语句,意思是结束最近的循环 2.continue 仅适用于循环语句,意思是跳到 ...

  10. Asp.net获取网站绝对路径的几种方法

    在编写ASP.NET应用程序的时候,有时候为了更好的进行控制静态文件的路径,以及网站部署过程中的虚拟路径等问题,采用绝对路径避免资源出现Not Found,下面先看看几种获取绝对路径的方法: 1. 以 ...