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

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

技术点:当文本框响应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”,右侧不显示内容。 

 

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值