利用Ajax实现注册重复验证和地区代号选择(ThinkPHP框架)

1、静态代码：
<form>
    <table>
        <tr>
            <td>手机号：</td>
            <td><input type='text' name='phone' onblur='ChangeContent(this.value,3)'></td>
            <td><span id='userPhone'></span></td>

        </tr>
        <tr>
            <td>地址：</td>
            <td>
                <table>
                    <tr>
                        <td id='sf'>
                            <select>
                                <option>请选择</option>
                                <volist name = 'sflist' id='vo1'>
                                    <option value='<{$vo.id}>'><{$vo.title}></option>
                                </volist>
                            </select>
                        </td>
                        <td id='sq'>
                            <select>
                                 <option>请选择</option>
                            </select>
                        </td>
                        <td id='xq'>
                            <select>
                                 <option>请选择</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</form> 
2、JS代码：
 <script type="text/javascript">

            function ChangeContent(str,id){

                var xmlhttp="";

                if(window.XMLHttpRequest)

                {

                        xmlhttp=new XMLHttpRequest();

                }else{

                        xmlhttp=new ActiveXObject("Microsoft.HTTP");

                }

                xmlhttp.onreadystatechange=function(){

                        if(xmlhttp.readyState==4 && xmlhttp.status==200)

                        {

                                if(id==1)

                                    document.getElementById("sq").innerHTML = xmlhttp.responseText;

                                if(id==2)

                                    document.getElementById("xq").innerHTML = xmlhttp.responseText;

                                if(id==3)

                                   document.getElementById("userPhone").innerHTML = xmlhttp.responseText;

                        }

                }

                xmlhttp.open("GET","/feeao/index.php/Home/UserSignIn/toAjax?str="+str+"&id="+id,true);    //通过GET方法将值传入UserSignIn模块的toAjax方法

                xmlhttp.send(); 

            }
3、UserSignIn模块中的toAjax方法：

    public function toAjax(){

        $id = $_GET['str'];

        $str = $_GET['id'];
        $con = mysql_connect("localhost:3306","root","123");

         mysql_select_db("feeao",$con);

         mysql_query("set character utf8");

         mysql_query("set names utf8"); 

        if($str == 1){

            echo "<select id='sq' name='sq' onchange='ChangeContent(this.value,2)' style='width:80px;'><option>请选择</option>";

                $rs = mysql_query("select * from think_cities where province_id = ".$id);

                while($row = mysql_fetch_array($rs)){

                    echo "<option value='".$row['id']."'>".$row['title']."</option>";

                }

            echo"</select>";

        }

        else if($str == 2){

            echo "<select id='xq' name='xq' style='width:80px;'><option>请选择</option>";

                $rs1 = mysql_query("select * from think_zones where city_id = ".$id);

                while($row1 = mysql_fetch_array($rs1)){

                    echo "<option value='".$row1['id']."'>".$row1['title']."</option>";

                }

            echo"</select>";

        }else if($str == 3){

            $user = M('user');

            if($user->where('user_phone = '.$id)->count() != 0){

                echo"该手机号已注册！";

            }

        }

    } 
 实例效果：
1
2
3
4
5 
心得： Ajax技术在web开发中运用得非常广泛，这并不是一种新技术，是一种与服务器交换数据，并在不重新加载整个页面的情况下部分更新网页的艺术。