rails应用ajax之一：使用纯js方法

考虑如下需求：

1. 用户输入一个用户名，当焦点跳出文本框时，检查该用户名是否有效

2. 动态更新检查的结果

我们使用ajax的方式来实现这个简单的功能，首先建立view:check.html.erb:

<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "rails" %>
<%= stylesheet_link_tag 'user' %>

<h1>check user name</h1>

<script>
var xml_http = null;
function set_xml_http()
{
	if(!xml_http && typeof XMLHttpRequest != "undefined")
		xml_http = new XMLHttpRequest();
}

function start_request()
{
	//var name = $("#name").value;
	var name = document.getElementById("name").value;
	if(name != "")
	{
		set_xml_http();
		var url = "/users/check_name?username="+name;
		xml_http.open("GET",url,true);
		xml_http.onreadystatechange = request_handle;
		xml_http.send(null);
	}
	else
		document.getElementById("info").innerHTML = "你还没有输入name哦！"
}

function request_handle()
{
	if(xml_http.readyState < 4)
		info.innerHTML = "正在检查name是否合法..."
	else if(xml_http.readyState == 4)
	{
		if(xml_http.status == 200)
			info.innerHTML = xml_http.responseText;
	}
	else
		alert("错误：请求页面异常！")
}
</script>

<%= text_field_tag("name","",onchange:"start_request()")%>
<span id="info"></span>

不知道上述代码为毛不能使用jQuery！？暂且放一边吧...接着我们来写服务器对应的check_name方法：

def mk_color(color,txt)
    "<span class=#{color}>#{txt}</span>"
  end

  def check_name
    name = params[:username]
    if name.size <= 6
      render text:mk_color("red","#{name} 长度必须大于6个字节")
    elsif name =~ /fk|fuck|shit/
      render text:mk_color("red","#{name} 不能包含不和谐单词")
    else
      render text:mk_color("green","#{name} 可以使用")
    end

  end

如果name有效则返回绿色文字，否则返回红色文字；这个可以通过css来实现，对应的css如下：

.red {

color:red

}

.green {

color:green

}

别忘了还要加路由啊：

get 'users/check' => 'users#check'
get 'users/check_name' => 'users#check_name'

代码流大致如下：首先用户访问localhost:3000/users/check页面，然后输入用户名，当焦点离开文本框时，调用start_request方法；该方法首先建立一个xml_html对象（不考虑浏览器为ie情况，否则还得加一坨代码），该方法在safari和firefox测试有效。接着通过xml_html向check_name Action发送请求，随后注册一个回调函数request_handle；当请求返回时就会执行回调函数，该函数将结果实时动态的插入info对象。

巴特西

rails应用ajax之一：使用纯js方法

最新文章

热门文章