Struts+Ajax+Json Demo

前几天一直在忙着实现用户注册功能，今天有空便把这几天得到经验记下来，以便使用。

一、功能要求：在Struts2框架下使用Ajax，用户填写注册信息时，在不进行页面跳转的情况下给予用户名或者ID重复的提示。

二、环境配置：在已搭建Struts2框架的基础上，引入Jar包：json-lib-2.3-jdk15.jar、struts2-json-plugin-2.3.14.jar，引入JQuery类库

三、页面JSP代码：

<tr>
						<td width="77">
							账号: 
						</td>
						<td width="322">
							<input type="text" name="account" id="account" />
						</td>
						<td id="accountTip"></td>
					</tr>

四、JS代码：

$.ajax({
						
								url : "check/checkName",     // 后台处理程序，对应Action
								type : "post", 		     // 数据发送方式								
								dataType : "json",  	     // 接受数据格式								
								data : "userName="+$("#account").val(),   // 要传递的数据
								// 回传函数
					             timeout:20000,			     // 设置请求超时时间（毫秒）。   
					             error: function () {   		     //请求失败时调用函数。   
					            	     $("#msg").html("请求失败!"); 
					             },   
					             success:function(dataObj){    //请求成功后回调函数。
							     if(dataObj.message == "0" ){
								    $("#accountTip").html("用户名已存在!");
							     }else if(dataObj.message == "1"){
							            $("#accountTip").html("用户名可用");    
							     }
						     }
								
						});//$.ajax({

五、Struts.xml

<package name="check" namespace="/check" extends="json-default" >	    	
		    	<action name="checkName" class="com.register.UsingAjax" method="checkName">
		    		<result type="json"></result>
		    	</action>
	    </package>

六、Java代码

package com.register;
			
			import com.opensymphony.xwork2.ActionSupport;
			
			public class UsingAjax extends ActionSupport{
			
				private String userName;
				private String message;
			
				public String checkName() {
			
					String name = this.userName;
					if (localUtil.verifyName(name))
						message = "0";
					else
						message = "1";
			
					return SUCCESS;
				}
			
				public String getMessage() {
					return message;
				}
			
				public void setMessage(String message) {
					this.message = message;
				}
			
				public String getUserName() {
					return userName;
				}
			
				public void setUserName(String userName) {
					this.userName = userName;
				}
			
			}

七、效果图：





八、注意事项：

其中jquery-2.0.0.min.js在使用时仍存在bug，对于chrome与firefox支持良好，但对IE9仍然存在以下问题：




解决方法：使用稳定的jquery-1.10.1.min.js