php学习笔记（二）ajax验证用户注册

php

一，前言

ajax实现注册登录等功能的好处不言而喻。如果不用ajax，当注册项太多，而用户网络不好时，填好表单点击提交等待半天结果返回个"此用户名被占用"，这用户体验多不好啊！但ajax只是一个媒介，还是要用php来处理与数据库的交互。废话不多说，直接上代码。

二，html结构

html表单多简单谁不会写啊，但注意这里有个坑，为了填这个坑浪费了大半天时间。直接看正确的代码吧。

<form>
    用户名<input type="text" id="username"/><span class="msg1"></span><br/>
    密码<input type="password" id="password" /><span class="msg2"></span><br>
    <!-- type不能是submit，不然还是会刷新提交 -->
    <input type="button" value="提交" id="reg" />
</form>
<p class="success"></p>

一般注册信息都是放在表单里，所以你即使用了ajax,不用name属性，当你把表单元素的值赋给了变量，form标签不可省略。不然在IE低版本会出错。

还有很重要的一点，一般我们提交时习惯让type=submit，但用ajax处理时最好改成buttopn，不然你会发现虽然注册信息提交到后台保存到数据库了，但整个页面都刷新了，所以你并没有实现ajax无刷新的目标。因为submit会将整个form标签里的表单提交然后刷新页面。还有一种解决方法，去掉form标签。即form标签和submit只改一处就可以了。虽然可以实现无刷新提交，但存在兼容性问题。所以还是直接改成button吧。

三，ajax传递数据

主要功能是当输入框失去焦点时能立刻无刷新显示提示信息（用户名是否可用，密码是否合理），点击提交能立刻显示注册成功与否的信息。

判断密码长度那块是普通的jquery判断的，没有ajax。

<script>
    $(function() {
    	//判断用户名是否可用
	    $("#username").blur(function(){
            var username=$("#username").val();
            if (username!="") {
                //Math.random()防止ie缓存
                $.post('handle-register.php',{n:Math.random(),username:username,act:"find-name"}, function(data) {
                    $(".msg1").html(data);
                });
            }else{
                $(".msg1").html("请填写用户名！");
            }
        });         
        //判断密码长度
        $("#password").blur(function(){
           var password=$("#password").val();
           if (password.length<6) {
              $(".msg2").text("密码不能少于6位");
           }else{
                $(".msg2").text("密码合法");
           }	
    	})
    	//提交注册信息           
    	$("#reg").click(function(){
              var username=$("#username").val();
              var password=$("#password").val();
              if (username!="" && password!="") {
                 $.post("handle-register.php",{n:Math.random(),username:username,password:password,act:"reg"},function(data){
                    $(".success").html(data);
                 })
              }else{
                $(".success").html("请填写注册信息");
              }
        })
    });
    </script>

代码很简单就不详细解释了。

四，后台数据处理

首先连接数据库,下面是conn.php文件

<?php
  //设置时区为中国时区
  date_default_timezone_set('Asia/Shanghai'); 
  //连接数据库服务器
  $conn=mysql_connect("localhost","root","");
  //设置数据库字符集
  mysql_query("set names 'utf8'");
  //连接数据库
  mysql_select_db("phptest",$conn);
?>

然后php处理数据，下面是handle-register.php

<?php 
  header("Content-type:text/html;charset=utf8");
  require 'conn.php';
  $username=$_POST['username'];
  $act=$_POST['act'];//操作标志
  isRegister($act,$username);
  insert($act,$username);
  //判断用户名是否被注册
  function isRegister($act,$username){ 
    if ($act=="find-name") {
        $sql="select * from user where username='$username'";
        $result=mysql_query($sql);
        if (mysql_num_rows($result)==0) {
            echo "用户名可用";
        }else{
            echo "此用户名已被注册";
        }
    }   
  }
  //提交后将注册信息保存到数据库
  function insert($act,$username){
    if ($act=="reg") {
        $password=$_POST['password'];
        $result=mysql_query("select * from user where username='$username'");
        if (mysql_num_rows($result)==0) {//不存在则注册
            $sql="insert into user (username,password) values ('$username','$password')";
            mysql_query($sql);
        }
        //保证username有值
        $result=mysql_query("select * from user where username='$username'");
        $row=mysql_fetch_assoc($result);
        echo $row['username']." 注册成功";
   }
 }
?>

因为password的值是它的input标签失去焦点时才获取，而用户一般按照表单顺序填写，不会第一个就填写它，所以在处理数据时没有一开始就获取页面上传过来的password的值，因为此时它为空。到后面用到它才获取。

五，后记

看代码是不是觉得很简单？我也觉得不难，其实我早就写的差不多了，但出现了一些意想不到的bug让我调试半天。为了那个type=button查了好长时间，还有最后注册成功的提示，一开始我懒，只在开始为了判断该用户是否被注册而为$result赋值了，然后就直接使用它，结果导致第一次提交只显示'注册成功'，再点一次才显示'XX注册成功'。

又找了半天错误才发现如果此用户名是第一次注册，数据库里是没有这个username的，所以username的值为空只输出'注册成功'。第二次提交时注册信息已写进数据库了，所以能正确显示。所以我就在后面又写了一遍$result的赋值语句。这才一次提交就能正确显示。

以后还是要细心，考虑全面才不浪费时间。

因为涉及到数据库，为了安全不便直接演示demo，各位有需要的直接拷贝到本地吧，我这个数据库名为phptest,数据表名为user,字段只username和password足以。