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个处 ...
随机推荐
- Webpack标准配置
let htmlWebpckPlugin= require('html-webpack-plugin');//该组件能将src下面提定的html文件与打包后在js文件打包在一起module.expor ...
- Docker应用设计四大关键
TechTarget中国原创] Docker已经垄断了容器技术.设计应用时注意考虑便携性能够帮助企业利用容器技术能提供的所有优势. 随着Docker应用和容器越来越流行,很多公司都开始将容器技术作为其 ...
- Android学习记录（5）—在java中学习多线程下载之断点续传②
在上一节中我们学习了在java中学习多线程下载的基本原理和基本用法,我们并没有讲多线程的断点续传,那么这一节我们就接着上一节来讲断点续传,断点续传的重要性不言而喻,可以不用重复下载,也可以节省时间,实 ...
- 《Cracking the Coding Interview》——第4章：树和图——题目9
2014-03-19 05:07 题目:给定一棵二叉树T和一个值value,在T中找出所有加起来和等于value的路径.路径的起点和终点都可以是树的任意节点. 解法:我偷了个懒,直接把这棵树看成一个无 ...
- USACO Section1.2 Milking Cows 解题报告
milk2解题报告 —— icedream61 博客园(转载请注明出处)---------------------------------------------------------------- ...
- 孤荷凌寒自学python第四十六天开始建构自己用起来更顺手一点的Python模块与类尝试第一天
孤荷凌寒自学python第四十六天开始建构自己用起来更顺手一点的Python模块与类,尝试第一天 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 按上一天的规划,这是根据过去我自学其它编程语 ...
- （原）UE4.20 自定义编辑器 - 基础(一)创建编辑器模块
@author:白袍小道 前言: 本小文参考了UnrealC++,游戏编辑器(应该都找不到了嘿嘿)等书籍. 引擎基于UnrealEngine4.20版本(由于UnrealC++ 用的是 ...
- Day4 自定义控件/ListView/RecyclerView
创建自定义控件 引入布局 在新增的title.xml中创建一个自定义的标题栏: <LinearLayout xmlns:android="http://schemas.android. ...
- MySQL事物相关学习
总结下最近对MySQL数据库的认识 Q:在手动开启事物后,commit失败是否需要显示的rollback? A:在网上查了不少资料,没有查到明确的答案.问了身边的朋友,朋友也不太了解,不过均表示显示的 ...
- Limeng：Individual Project: Word frequency program -BUAA Advanced Software Engineering
11061190-李孟 Implement a console application to tally the frequency of words under a directory (2 mod ...