目的:当用户在文本框中输入用户名时,页面显示输入的该用户名是否已存在。若存在页面显示该用户已存在,若不存在,则不显示内容。
技术点:当文本框响应onkeyup事件时,触发JS方法。该方法先获取文本框内容,然后用Ajax将该内容传递到后台(Rails),后台获取该内容后,查看是否已存在相同的内容。若存在则返“The user already exists!”字符串,反之,则返回空字符。JS方法获取返回值后,将返回值显示在页面上。
页面效果如下:
<h3>Please Enter Your UserName</h3>
User Name:<input type="text" id="user_name" οnkeyup="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”,右侧不显示内容。