ajax晉級篇---無刷新的數據交互用戶名驗證----text反饋 標籤： ajax 2017-05-25 20:55 73人閱讀 評論(

body>
<div class="login">
	<h2>我的中心</h2>
	<div class="login-top">
		<h1>註冊</h1>
		<form action="{:U('Person/do_register')}" method="post">
			<input type="text" value="" onkeyup="checkName();" id="username" name="username" placeholder="用戶名字">
			 <input style="border-width: 0;color: red;background-color:#e1e1e1;margin-left: 5%;" type="email" id="myres" >
			<input type="text" value="" name="email"  placeholder="郵箱">
			<input type="password" value="" name="password" placeholder="密碼">
			<div class="forgot">
	    	
	    	<input type="submit" value="註冊" >
	  	  </div>
	    </form>
	    
	</div>
	<div class="login-bottom">
		<h3>已有賬號 <a href="{:U('Person/login')}">登陸</a> </h3>
	</div>
</div>	



</body>

<script type="text/javascript">

	//第一步---------------------建立ajax引擎
	function getXmlHttpObject(){
		
		var xmlHttpRequest;
		//不一樣的瀏覽器獲取對象xmlhttprequest 對象方法不同
		if(window.ActiveXObject){
			
			xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");//這個是ie內核
			
		}else{

			xmlHttpRequest=new XMLHttpRequest();//非ie內核
		}

		return xmlHttpRequest;//將建立建立的ajax引擎實例化

	}

	var myXmlHttpRequest="";//設置全局變量 爲了後面的chuli 函數須要取得屬性

	//驗證用戶名是否存在
	function checkName(){
		
		myXmlHttpRequest=getXmlHttpObject();//從實例化的模型裏面的方法函數 

		//怎麼判斷建立ok
		if(myXmlHttpRequest){
			
			
			var url="{:U('Person/do_register1')}";//url 屬性 選擇提交的地址
			var data="username="+$('username').value;//數據 取得數據
			myXmlHttpRequest.open("post",url,true);//這裏選擇提交的方式post
			myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//打開請求.

			//指定爲了第四步處理作準備回調函數.chuli是函數名
			myXmlHttpRequest.onreadystatechange=chuli;
			//第二部--------------------------發送數據到服務器端
			myXmlHttpRequest.send(data);
	


		}
	}

	//回調函數
	function chuli(){
		
		//+myXmlHttpRequest.readyState
		//第四步------------------------------取出頁面返回的數據
		if(myXmlHttpRequest.readyState==4){
			//取出值,根據返回信息的格式定.text
			$('myres').value=myXmlHttpRequest.responseText;
		}
	}

	//這裏咱們寫一個函數 用來接收函數的id
	function $(id){
		return document.getElementById(id);
	}
</script>

 public function do_register1(){
        //第三步-------------------------------------數據庫這裏處理
        $map['username']=I('post.username');
        $res=$this->person_model->where($map)->count();
        //返還數據到ajax引擎裏面
        if($res>0){
            echo "用戶名已註冊,No";
        }else{
            echo "此用戶名未註冊,Ok";
        }
    }