AJAX简介

(1)AJAX = 异步 JavaScript 和 XML。

(2)AJAX 是一种用于创建快速动态网页的技术。

(3)通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

(4)传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

简单布局

JS先判断,把前端可以的判断做,减少服务器的交互

$('button').on('click',function(){;var booluser =  $('#data input')[0].value.length >= 8;var     boolpwd = $('#data input')[1].value.length >= 6  ;var boolpwd1 = $('#data input')[1].value == $('#data input')[2].value ;var retel =/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/g; var booltel = retel.test($('#data input')[3].value);var reemail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g ;var boolemail = reemail.test($('#data input')[4].value);            //这里应该嵌套使if的,但是不是实际开发,这么写便于代码观看if(!booluser){console.log('user:不能少于8位');}if(!boolpwd){console.log('pwd:不能少于6位');}if(!boolpwd1){console.log('pwd1:两次输入密码不一致');}if(!booltel){console.log('tel:请输入正确的电话号');}if(!boolemail){console.log('email:请输入正确的邮箱格式');}

利用ajax做异步请求

if(booluser && boolpwd && boolpwd1 && booltel && boolemail){                $.ajax({type:"get",                  url:"reg.php",async:true,data:{user:$('#data input')[0].value,pwd:$('#data input')[1].value,tel:$('#data input')[3].value,email:$('#data input')[4].value},success : function(data){console.log(data);}});}})

在php中接受网络请求传过来的数据,查看数据库做出判断,把结果反馈给前段

<?php
var_dump($_GET);
$user = $_GET['user'];
$pwd = $_GET['pwd'];
$tel = $_GET['tel'];
$email = $_GET['email'];
$msg = '';
header('Content-type:text/html;charset=utf8');$adders = "mysql:host=localhost;dbname=Users;";$db = new PDO($adders,"root");$db->exec('set names utf8');   //链接数据库,创建表$result = $db->exec('create table if not exists ajaxreg(user varchar(100) primary key,pwd varchar(100),tel varchar(30),email varchar(30)) default charset=utf8');$resulttel = $db->query("select tel from ajaxreg ");$resulttel->setFetchMode(PDO::FETCH_ASSOC);$arr = $resulttel->fetchAll();foreach($arr as $ar){if( $ar['tel'] == $tel){$msg = "您输入的手机号已经存在";echo $msg;       //如果手机号已存在,终止整个程序die();}}         //如果手机号不存在执行下面代码$result = $db->exec("insert into ajaxreg values('$user','$pwd','$tel','$email')");if($result){$msg = "注册成功";}else{$msg = "用户名已存在";}echo $msg;$db->close();
?>

这样一个简单的注册界面就用AJAX实现了

转载于:https://www.cnblogs.com/dengting/p/5978634.html

AJAX实现简单的注册页面异步请求相关推荐

  1. 使用JSP Servlet和Ajax实现简单的注册页面的用户名密码验证

    大家都知道Ajax并不是一项新的发明技术,它的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).我们在使用html表单提交页面时,会有一 ...

  2. HTML实现简单的注册页面

    HTML是一种标记语言,用于创建网页,这里使用HTML创建了一个简单的注册页面,其中包含表单元素,如文本框.密码框.单选按钮.下拉列表.文件上传和文本域. 先看看效果图:  代码如下: <!DO ...

  3. 实现简单QQ注册页面

    HTML实现简单QQ注册页面 今天突发奇想,仿一个QQ注册页面哈哈!! 效果如图: 按钮功能都还没实现,只是一个简单的网页界面! 实现代码如下 <!DOCTYPE html> <ht ...

  4. ajax请求返回json实例,Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据

    一.AjaxJson.aspx 处理业务数据,产生JSon数据,供JqueryRequest.aspx调用,代码如下: protected void Page_Load(object sender, ...

  5. 简单了解Vue的异步请求,axios-0.18.0.js插件实现异步

    Vue的异步请求 Vue 异步操作 在 Vue 中发送异步请求,本质上还是 AJAX.我们可以使用 axios 这个插件来简化操作! 使用步骤 引入 axios 核心 js 文件. 调用 axios ...

  6. php 判断用户是否刷新,如何在php和ajax中创建一个注册页面,它会在不刷新页面的情况下检查某个用户名是否已经存在? - php...

    我有一个register.php文件,它为我的网站创建了新用户.但是,如果某人使用已经存在的用户名,则仅当他输入整个表单并提交时才会生成错误.如何实现Ajax / Jquery以在不提交表单的情况下显 ...

  7. html+css实现了简单的注册页面

    直接上代码 (注册页面:简单修改就可用) <!DOCTYPE html> <html><head><meta charset="utf-8" ...

  8. 一个简单的注册页面制作

    一个简单的网页–流水哗啦啦购物平台: 点击注册新用户后,出现的注册页面: 当密码少于八位时出现的提示: 当密码格式不正确时出现的提示: 当年龄格式不正确时出现的提示:(年龄有效格式为1-120之间的数 ...

  9. Android简单封装类似JQuery异步请求

    在android开发中经常会使用异步请求数据,通常会使用handler或者AsyncTask去做,handler 配合message 使用起来比较麻烦,AsyncTask 线程池只允许128个线程工作 ...

最新文章

  1. Linux中如何杀掉僵尸进程
  2. 使用 spring 的 IOC 解决程序耦合——获取spring的Ioc核心容器,并根据id获取对象、核心容器的两个接口(ApplicationContext、BeanFactory)引发出的问题
  3. SCN Headroom与时光倒流到1988年的Oracle数据库
  4. 在linux kernel或android中解析cmdline参数
  5. 强化学习7——基于环境模型的RL方法
  6. leetcode-49-字母异位词分组
  7. 通信工程施工图案例分析
  8. Android入门(一) | Android Studio的配置与使用
  9. pycharm中的数据库可视化
  10. 剑指offer(C++)-JZ24:反转链表(数据结构-链表)
  11. 奥威软件大数据bi_哪家BI软件能做Sql server的数据可视化分析?
  12. 【XSY2774】学习 带花树
  13. 利用对象思想来绘制canvas帧动画
  14. 使用 Kotlin , Groovy ,Java 开发一个自己的 Gradle 插件
  15. php mysql 博客,PHP操作MySQL
  16. 10-新闻发布系统数据库-新闻管理数据操作
  17. Openg图像缓存及显存布局
  18. Coding and Paper Letter(四十二)
  19. 32位计算机装64位操作系统,电脑装32位还是64位系统与硬件有关系吗
  20. 闲聊一下android 3D 网络游戏

热门文章

  1. LinearLayout、RelativeLayout、FrameLayout居中显示
  2. Transaction And Lock--锁相关基础
  3. Silverlight实例教程 - Navigation导航框架系列汇总
  4. 关于《指针的艺术》看书时所遇到的问题
  5. 屏幕边框闪光_写给想入手21:9的屏幕党,明基 EX3501R 真香跳坑指南
  6. 1.2.3 TCP/IP参考模型和五层参考模型
  7. UML Distilled 3rd 学习笔记
  8. C++中 gets()函数
  9. 给Resnet加人工经验提升30%的准确率
  10. DDoS攻击走向应用层