ajax提交用户名，验证是否存在该用户名

目的：当用户在文本框中输入用户名时，页面显示输入的该用户名是否已存在。若存在页面显示该用户已存在，若不存在，则不显示内容。

技术点：当文本框响应onkeyup事件时，触发JS方法。该方法先获取文本框内容，然后用Ajax将该内容传递到后台（Rails），后台获取该内容后，查看是否已存在相同的内容。若存在则返“The user already exists!”字符串，反之，则返回空字符。JS方法获取返回值后，将返回值显示在页面上。

页面效果如下：
ajax提交用户名，验证是否存在该用户名

 <h3>Please Enter Your UserName</h3>
  User Name:<input type="text" id="user_name" onkeyup="check_userName(this.value)"/>
  <span id = "note"></span>

<script type="text/javascript">
  function check_userName(user_name){
	var xmlhttp;
	if (window.XMLHttpRequest){
	// IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp=new XMLHttpRequest();
	}else{
		// IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
		document.getElementById("note").innerHTML = xmlhttp.responseText;
		}
	}
	xmlhttp.open("POST","/login/get_data",true);//url地址
	xmlhttp.send("userName="+encodeURIComponent(user_name));//传递的参数
  }
  </script>

def get_data
	ret = ""
	userName=params[:userName]
	arr_userNames=["Ad","James","John","David","Daniel","Michael","Jack","Kate","Lucy","Jane","Mary","Elizabeth","Ann", "Sarah","Catherine","MengHaibo"]
	#查看该用户名是否存在
	if arr_userNames.include?(userName) 
		ret = "The user already exists!"
	end
	render :text => ret 
  end

运行代码后，在用户名文本框中输入“Jack”，文本框右侧会显示“The user already exists”；若输入“Json”，右侧不显示内容。

ajax提交用户名，验证是否存在该用户名

相关推荐