php+Ajax无刷新验证用户名操作实例详解

本文实例讲述了php+Ajax无刷新验证用户名操作。分享给大家供大家参考,具体如下:

AJAX 简介

AJAX = Asynchronous JavaScript And XML(异步 JavaScript 及 XML)
AJAX 是 Asynchronous JavaScript And XML 的首字母缩写。
AJAX 并不是一种新的编程语言,而仅仅是一种新的技术,它可以创建更好、更快且交互性更强的 web 应用程序。
AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据。
通过在幕后与 web 服务器交换数据,而不是每当用户作出改变时重载整个 web 页面,AJAX 技术可以使网页更迅速地响应

Ajax请求

传统的 web 应用程序会把数据提交到 web 服务器(使用 HTML 表单)。在 web 服务器把数据处理完毕之后,会向用户返回一张完整的新网页。
由于每当用户提交输入,服务器就会返回新网页,传统的 web 应用程序往往运行缓慢,且越来越不友好。
通过 AJAX,web 应用程序无需重载网页,就可以发送并取回数据。完成这项工作,需要通过向服务器发送 HTTP 请求(在幕后),并通过当服务器返回数据时使用 JavaScript 仅仅修改网页的某部分。
一般使用 XML 作为接收服务器数据的格式,尽管可以使用任何格式,包括纯文本。

无刷验证新用户名

自己最近看视频自学ajax,想把一些实例分享给大家,第一个案列是无刷新验证用户名是否可用。

一、效果图

1、用户可用

2、用户不可用

3、项目文件(register.php-注册页面 和process.php-判断用户名是否可用)

二、代码

register.php-注册页面以及ajax发送请求

<!doctypehtml>
<htmllang="en">
<head>
  <meta charset="UTF-8">
  <title>注册</title>
  <scripttype="text/javascript">
    //创建ajax引擎
    function getXmlHttpObject(){
      var xmlHttpRequest;
      //不同浏览器获取对象XMLHttpRequest
      if(window.ActiveXObject){
        xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP");
      }
      else{
        xmlHttpRequest=newXMLHttpRequest();
      }
      return xmlHttpRequest;
    }
    var myXmlHttpRequest="";
    //验证用户名是否存在
    function checkName(){
      myXmlHttpRequest=getXmlHttpObject();
      //判断xmlHttpRequest是否成功
      if(myXmlHttpRequest){
        //通过myXmlHttpRequest对象发送请求到服务器的某个页面
        //第一个参数标示请求的方式,‘get'、‘post'
        //第二个参数指定url,对那个页面发送ajax请求(本质仍然是http请求)
        /*XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser,bstrPassword);
         */
        varurl="/Ajax/process.php?username="+$("username").value;
        //window.alert(url);
        myXmlHttpRequest.open("get",url,true);
        //window.alert('创建ajax引擎成功');
        //指定回调函数,chuili是函数名
        myXmlHttpRequest.onreadystatechange=chuli;//调用
        //真的发送请求,如果是各塔请求则填入null即可
        //如果是post请求,则填入实际数据
        myXmlHttpRequest.send(null);
      }
      else
      {
//        window.alert('创建失败');
      }
    }
    function chuli(){
      // window.alert("cuhli函数被调用"+myXmlHttpRequest.readyState);
      //我要取出从register.php返回的数据
      if(myXmlHttpRequest.readyState==4){
        //取出值,根据返回信息的数据格式
        //window.alert("服务器返回"+myXmlHttpRequest.responseText);
        $('myres').value=myXmlHttpRequest.responseText;
      }
    }
    function $(id){
      return document.getElementById(id);
    }
  </script>
</head>
<body>
<formaction="???" method="post">
  用户名字:<inputtype="text" name="username1"onkeyup="checkName()" id="username">
  <input type="button"value="验证用户名">
  <input style="border-width:0;color: #e93b3d" type="text" id="myres">
  <br/>
  用户密码:<inputtype="password" name="password"><br>
  电子邮件:<inputtype="text" name="email"><br/>
  <input type="submit"value="用户注册">
</form>
</body>
</html>

process.php—判断用户名是否可用

<?php
  //接受数据
  $username=$_GET['username'];
//  echo "用户名".$username;
  if($username=="李四"){
    echo "用户名不可用";
  }
  else{
    echo"恭喜用户名可用";
  }
?>

三、原理图

更多关于PHP相关内容感兴趣的读者可查看本站专题:《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《PHP基本语法入门教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家PHP程序设计有所帮助。

(0)

相关推荐

  • php传值方式和ajax的验证功能

    PHP前台传值到后台进行验证的3种方式 1.不外乎就是post,get和ajax方式 post和get方式就是在表单上用method方式规定主要就是ajax动态传值进行后台验证 2.ajax 动态传值代码如下 //给调用ajax的这里设一个函数 function u_ajax(uname,upass){ //创建ajax if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveOb

  • AJAX PHP无刷新form表单提交的简单实现(推荐)

    ajax.php: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <script language="javascript"> function saveUserInfo() { //获取

  • ajax+php实现无刷新验证手机号的实例

    一款简单的无刷新验证手机号是否注册: 客户端实现: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #btn{width:80px;height:30px;} </style> </head> <body> <form> 请输入手机号: <input type="text" id=

  • PHP+Ajax验证码验证用户登录

    用AJAX 验证用户登录的一个好处是不刷新跳转页面,外加用到验证码就更安全了,摸索的写了下.一共用到三个文件: yz.php:  生成验证码的PHP 文件,将验证码将在SESSION 里,供登录时对比调用 index.php: 用户登录的HTML 文件 loginCheck.php: 验证用户登录的文件 下面一一解析: yz.php 文件 <?php session_start(); //生成验证码图 Header("Content-type: image/PNG"); //长与

  • PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)

    前 言 直接上代码有点不厚道.于是按照天朝传统,整段描述吧....(本人语言表达能力有限,大家忍着看) 功 能 在网站注册用户时使用,主要为了无刷新异步验证用户输入的用户名或者Email是否已注册. 这功能大家肯定见过,大多数网站都有的,我一直对这个功能很感兴趣,所以这几天研究了下 jQuery + Ajax 整了一个功能不算完善,但足以应付普通使用的代码 (更牛的功能大家自己去发掘) 文 件 说 明 reg.php //为注册页面 check_user.php //为用户验证页面 (GET,P

  • PHP+AJAX实现无刷新注册(带用户名实时检测)

    很多时候,我们在网上注册个人信息,在提交完页面后,总得等待页面刷新来告诉我们注册是否成功,遇到网络差的时候,如果注册了一大串的东西,在经过漫长的等待页面刷新后,得到的确是"您的用户名已被使用"或XXXXXXX不合法,我想大家的心情一定特别不爽,今天就介绍个AJAX实现页面不刷新注册+实时检测用户信息的简单注册程序,希望对大家有所帮助.好的,先看注册界面代码: <table width="831" border="0" align="

  • PHP+Ajax简单get验证操作示例

    本文实例讲述了PHP+Ajax简单get验证操作.分享给大家供大家参考,具体如下: 1.显示页面代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>XMLHttpRequest独对象使用实例</title> <script language="JavaScript&

  • PHP与Ajax相结合实现登录验证小Demo

    AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 设计一个用户注册页面,当用户输入注册名的时候,检测用户名是否已存在

  • php注册系统和使用Xajax即时验证用户名是否被占用

    在php中使用Xajax能够即时与数据库发生交互 带给用户更好的体验 主要的应用有网页的即时.不刷新的登录系统 也可以利用于注册系统中 即时验证用户名是否被占用 一.基本目标 首先在mysql中有一张用户信息表user 编写一个用户注册系统,一开始注册按钮是禁用的状态 当用户输入用户名完毕时,马上检查这个用户名是否被占用,如果是,禁用注册按钮,并弹出对话框 如果用户输入的用户名没有被占用,则解锁注册按钮,但如果用户输入两次输入的密码不一致,同样不允许用户注册 直到用户满足所有注册条件的时候,才放

  • php+Ajax无刷新验证用户名操作实例详解

    本文实例讲述了php+Ajax无刷新验证用户名操作.分享给大家供大家参考,具体如下: AJAX 简介 AJAX = Asynchronous JavaScript And XML(异步 JavaScript 及 XML) AJAX 是 Asynchronous JavaScript And XML 的首字母缩写. AJAX 并不是一种新的编程语言,而仅仅是一种新的技术,它可以创建更好.更快且交互性更强的 web 应用程序. AJAX 使用 JavaScript 在 web 浏览器与 web 服务

  • ajax无刷新验证注册信息示例

    ajax无刷新验证注册信息示例,其大概思路如下: 一.把注册的html页面做好(html+css) 1.不需要form表单,直接用div包着 2.需要四个标签来显示正确.错误的信息显示 3.不用submit提交按钮,直接用button 如图: 二.把ajax做成一个函数,通过传简单的参数可以与服务器进行数据交换. 1.这个ajax函数前面有一篇如何处理利用ajax处理返回数据的文章中详细说明了. 2.ajax函数需要三个参数,url,jsonData,getMsg.这里的url都是regProc

  • 微信小程序 增、删、改、查操作实例详解

    微信小程序 增.删.改.查操作实例详解 1.以收货地址的增删改查为例 2.文件目录 js文件是逻辑控制,主要是它发送请求和接收数据, json 用于此页面局部 配置并且覆盖全局app.json配置, wxss用于页面的样式设置, wxml就是页面,相当于html <form bindsubmit="addSubmit"> <view class="consignee"> <text class="consignee-tit&q

  • IOS 基本文件操作实例详解

    IOS 基本文件操作实例详解 在iOS的App沙盒中,Documents和Library/Preferences都会被备份到iCloud,因此只适合放置一些记录文件,例如plist.数据库文件.缓存一般放置到Library/Caches,tmp文件夹会被系统随机清除,不适宜防止数据. [图片缓存的清除] 在使用SDWebImage时,图片被大量的缓存,有时需要获取缓存的大小以及清除缓存. 要获取缓存大小,使用SDImageCache单例的getSize方法拿到byte为单位的缓存大小,注意计算时

  • JDBC中resutset接口操作实例详解

    本文主要向大家展示JDBC接口中resutset接口的用法实例,下面我们看看具体内容. 1. ResultSet细节1 功能:封锁结果集数据 操作:如何获得(取出)结果 package com.sjx.a; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.Statement; import org.junit.Test; //1. next方

  • Angularjs cookie 操作实例详解

    摘要 现在很多app采用内嵌h5的方式进行开发,有些数据会存在webveiw的cookie中,那么如果使用angularjs开发单页应用,就需要用到angularjs的cookie操作.这里提供一个简单的学习demo.方便快速上手. 一个例子 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="myapp"> <head> <meta http

  • jQuery EasyUI之验证框validatebox实例详解

    1.样式 validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息.该验证框可以结合form(表单)插件并防止表单重复提交. 2.练习1:验证输入字符长度及非空 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>validatebox</title>

  • 数据结构 栈的操作实例详解

    数据结构 栈的操作实例详解 说明: 往前学习数据结构,想运行一个完整的顺序栈的程序都运行不了,因为书上给的都是一部分一部分的算法,并没有提供一个完整可运行的程序,听了实验课,自己折腾了一下,总算可以写一个比较完整的顺序栈操作的小程序,对于栈也慢慢开始有了感觉.下面我会把整个程序拆开来做说明,只要把这些代码放在一个文件中,用编译器就可以直接编译运行了. 一.实现 1.程序功能 关于栈操作的经典程序,首当要提及进制数转换的问题,利用栈的操作,就可以十分快速地完成数的进制转换. 2.预定义.头文件导入

  • Android Wifi的forget()操作实例详解

    Android  Wifi的forget()操作实例详解 我们在处理某个Wifi连接时,有时会需要忘掉当前连接的密码信息.执行这项操作,我们需要调用WifiManager::forget()函数: /** * Delete the network in the supplicant config. * * This function is used instead of a sequence of removeNetwork() * and saveConfiguration(). * * @p

随机推荐