利用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' οnchange='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开发中运用得非常广泛，这并不是一种新技术，是一种与服务器交换数据，并在不重新加载整个页面的情况下部分更新网页的艺术。

转载于:https://www.cnblogs.com/mrhy/p/3659661.html