网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文:

 

标题 php+ajax注册实时验证功能
范文
    ajax的实时验证技术已经很成熟了,在一些规范的网站上,如果有注册验证的模板,必定会涉及到ajax的无刷新验证,这在用户注册的体验中是很棒的,对比一个不能及时和后台无刷新对接的验证模式,要重新返回来刷新,这对于用户来说,体验上是很不友好的。
    ajax的模式几乎是所有站点应用的需求,ajax作为前端无刷新验证,可以和所有后台语言进行组合使用,比如asp+ajax,php+ajax,.net+ajax等等组合,这里主要讲解的是php+ajax的注册验证。
    下面的验证是一个完整的实例,我们在网站上面注册时,在输入用户名时,首先要进行无刷新验证,要验证一下后台数据库里面是否存在同名的数据,如果存在,则无刷新显示用户名已被占用的提示,这里一共涉及到四个文件。
    ajax.js:ajax技术的核心文件了,主要是验证提示的时时显示,这个文件通常不需要进行修改,只需要进行前端调用即可。
    var xmlHttp
    function showHint(str)
    {
    if (str.length==0)
     { 
     document.getElementById("txtHint").innerHTML=""
     return
     }
    xmlHttp=GetXmlHttpObject()
    if (xmlHttp==null)
     {
     alert ("Browser does not support HTTP Request")
     return
     } 
    xmlHttp.onreadystatechange=stateChanged 
    var geturl="conn.php?q="+str
    //sid是增加一个随机数 防止页面启用缓存技术·
    geturl=geturl+"&sid="+Math.random()
    geturl=encodeURI(geturl);
    geturl=encodeURI(geturl); 
    xmlHttp.open("GET",geturl,true)
    xmlHttp.send(null)
    } 
    function stateChanged() 
    { 
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
     { 
     document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
     } 
    }
    function GetXmlHttpObject()
    {
    var xmlHttp=null;
    try
     {
     // Firefox, Opera 8.0+, Safari
     xmlHttp=new XMLHttpRequest();
     }
    catch (e)
     {
     // Internet Explorer
     try
     {
     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
     }
     catch (e)
     {
     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     }
    return xmlHttp;
    }
    conn.php:这是网站的配置文件,要配置好自己本地的mysql用户名和密码,需要配置PHP与数据库的连接,可以参考PHP+MYSQL数据库连接的文章,另外要处理接受过来的数据进行时实显示,如果有多项要验证的文件,在这里进行多项接受和验证即可。
    <?php
    $q=$_GET["q"];
    $q = urldecode($q);
    if (strlen($q) > 0)
    {
     $conn = @mysql_connect("localhost","root","1010") or die ("MySql连接错误");
     mysql_select_db("xin",$conn);
     mysql_query("set names 'utf8'");
     $sql = "SELECT username FROM message WHERE username = '$q'";
     $query = mysql_query($sql);
     @$row = mysql_fetch_array($query);
     if(!empty($row['username']))
     {
     $response = "<font color=red>已经被注册!</font>";
     }else
     {
     $response = "<font color=blue>恭喜!可以注册!</font>";
     }
     echo $response;
    }
    ?>
    index.html:这就是前端文件了,这个文件相对来说要更简单一些,调用了ajax.js的处理文件,将要提交无刷新验证的文件提交到conn.php和后台进行连接。
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="ajax.js"></script> 
    </head>
    <body bgcolor="#999999">
    <center>
    <form> 
    <table>
     <tr>
     <td>用户名:</td>
     <td><input type="text" id="txt1" onKeyUp="showHint(this.value)"></td>
     </tr>
     <tr>
     <td colspan="2"><span id="txtHint"></span></td>
     </tr>
    </table>
    </form>
    </center>
    </body>
    </html>
    库.txt:这个就是SQL的数据库文件了,将这个文件导入到mysql数据库中即可。
    DROP DATABASE IF EXISTS `xin`;
    CREATE DATABASE `xin` /*!40100 DEFAULT CHARACTER SET utf8 */;
    USE `xin`;
    CREATE TABLE `message` (
     `id` int(11) NOT NULL auto_increment,
     `username` varchar(20) default NULL,
     PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
    将这几个文件保存在可以运行PHP文件的根目录即可,测试网址为 localhost/index.html,下面是打包下载的整套文件,试着修改为自己需求的注册模块,比如加上密码,姓名之类的。
    以上就是本文的全部内容,希望对大家的学习有所帮助
随便看

 

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板,是学习及工作的有利工具。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/12/16 2:10:33