这个是本菜鸟自己遇到在难题，用了半天才解决，所以来分享一下。 目的是实现SpringMVC 和 ExtJs 能够通过Ajax 结合起来，也就是在Ext页面实现动态刷新。
主要是用来解决Ext的Ajax回调函数无响应的情况
本次举的例子是动态验证用户名是否重复
1.额外需要的Jar包
mysoa-0.9.4.jar
slf4j-api-1.6.3.jar
2.ExtJS页面 JSP 编写
| <%@ page language = "java" contentType = "text/html; charset=UTF-8" pageEncoding = "UTF-8" %> <! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" > < title > Insert title here </ title > < link href = "../css/body.css" type = "text/css" rel = "stylesheet" /> < link href = "../js/ext-4.1.0-beta-3/resources/css/ext-all.css" type = "text/css" rel = "stylesheet" /> < script src = "../js/ext-4.1.0-beta-3/ext-all.js" type = "text/javascript" ></ script > < script src = "../js/jquery/jquery-1.7.2.min.js" type = "text/javascript" ></ script > < script type = "text/javascript" > var uname = Ext.create( 'Ext.form.TextField' ,{ id : 'userName' , fieldLabel : '*用户名' , name : 'userName' , labelStyle : "font-size:15px;padding: 10px;" , labelAlign : 'right' , allowBlank : false , blankText : '用户名不能为空' , //vtype : 'checkUser', listeners : { blur : valiUserName }, }); var pwd = Ext.create( 'Ext.form.TextField' ,{ id : 'userPwd' , inputType : 'password' , name : 'userPwd' , fieldLabel : '*密 码' , labelStyle : "font-size:15px;padding: 10px;" , labelAlign : 'right' , allowBlank : false , blankText : '密码不能为空' , listeners : { blur : valiUserPwd }, }); var confirmPwd = Ext.create( 'Ext.form.TextField' ,{ id : 'confirmPwd' , inputType : 'password' , fieldLabel : '*确认密码' , labelStyle : "font-size:15px;padding: 10px;" , labelAlign : 'right' , allowBlank : false , blankText : '确认密码不能为空' , vtype : 'password' , initialPassField : 'userPwd' , listeners : { specialKey : function (field,e){ if (e.getKey() == Ext.EventObject.ENTER) register(); },blur : valiPwdAndConfirmPwd } }); var panelMain = Ext.create( 'Ext.form.Panel' ,{ id : 'registerForm' , frame : true , border : false , waitMsgTarget: true , bodyStyle : 'background:#afb4db;padding:20px 70px 50px;' , buttonAlign : 'center' , items : [uname,pwd,confirmPwd], buttons : [{ text : '立即注册' , disabled: true , formBind: true , handler : register }] }); var win = Ext.create( 'Ext.window.Window' ,{ title : '欢迎使用注册页面' , width : 450, height : 302, layout : 'fit' , border : false , maxmizable : false , resizable : false , draggable : false , closable : false , items : panelMain }); Ext.onReady( function (){ //自定义的vtype Ext.apply(Ext.form.field.VTypes, { password: function (val, field) { if (field.initialPassField) { var pwd = field.up( 'form' ).down( '#' + field.initialPassField); return (val == pwd.getValue()); } return true ; }, passwordText: '两次输入的密码不一致' , checkUser : function (val) { if ( null !=val && "" !=val) { jQuery.ajax({ type: "POST" , dataType: "json" , url: "register.do?action=check&userName=" +val, success: function (msg){ return false ; } }); } return true ; }, checkUserText : '用户名已存在' }); Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'under' ; win.show(); }); //注册 function register() { /* panelMain.getForm().submit({ clientValidation : true, url : 'register.do?action=register', method : 'post' }); */ var userName = uname.getValue(); var userPwd = pwd.getValue(); if (panelMain.getForm().isValid()) { jQuery.ajax({ type: "POST" , dataType: "json" , url: "register.do?action=register&userName=" +userName+ "&userPwd=" +userPwd, success: function (msg){ if (msg.success){ Ext.Msg.alert( "Message" ,msg.description); window.location.href = " <%= request.getContextPath() %> /index.jsp "; } } }); } } //动态验证用户名是否存在 function valiUserName() { var userName = uname.getValue(); if (userName != null && userName != "" ){ jQuery.ajax({ type: "POST" , dataType: "json" , url: "register.do?action=check&userName=" +userName, success: function (msg){ if (msg.success){ Ext.Msg.alert( "Message" , "用户名已存在，请重新填写" ); uname.focus( true ); } } }); } } //验证密码 function valiUserPwd() { } //验证确认密码 function valiPwdAndConfirmPwd() { } </ script > </ head > < body > </ body > </ html > |
3.SpringMVC陪置页面
| <? xml version = "1.0" encoding = "UTF-8" ?> < beans xmlns = "http://www.springframework.org/schema/beans" xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance" xmlns:p = "http://www.springframework.org/schema/p" xmlns:context = "http://www.springframework.org/schema/context" xsi:schemaLocation = "http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-2.5.xsd" > <!-- Initializing Spring FrameworkServlet ' annomvc'时实例化bean，并自动依赖注入 --> <!-- 规约这里只扫描controller --> < context:component-scan base-package = "com.kedacom.login.common.user.controller" /> <!-- 启动Spring MVC的注解功能，完成请求和注解POJO的映射 --> < bean class = "org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" /> <!-- 对模型视图名称的解析，即在模型视图名称添加前后缀 --> < bean class = "org.springframework.web.servlet.view.InternalResourceViewResolver" p:prefix = "/" p:suffix = ".jsp" /> </ beans > |
4.Java注册页面
| package com.kedacom.login.common.user.controller; import javax.annotation.Resource; import javax.servlet.http.HttpServletResponse; import org.mysoa.core.model.Message; import org.mysoa.core.web.DirectlyRenderUtils; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import com.kedacom.login.user.entity.User; import com.kedacom.login.user.manager.RegisterManager; @Controller @RequestMapping ( "/user/register.do" ) public class LoginRegisterController { @Resource (name = "registerManager" ) private RegisterManager registerManager ; private final String URL_REGISTER = "/login/register" ; /** * 直接进入注册界面 * @return */ @RequestMapping (params= "action=initRegister" ) public String initRegister(){ return URL_REGISTER ; } /** * 用户注册 * @param request * @param response */ @RequestMapping (params= "action=register" ) public void registerUser(HttpServletResponse response,String userName,String userPwd) { Message msg = new Message(); User user = new User(); user.setUserName(userName); user.setUserPwd(userPwd); boolean isSuccess = registerManager .registerUser(user); if (isSuccess) { msg.setSuccess( true ); msg.setDescription( "注册成功" ); } else { msg.setSuccess( false ); msg.setDescription( "注册失败" ); } DirectlyRenderUtils. renderJson(response, msg); } /** * 验证用户名是否重复 * @param response * @param userName */ @RequestMapping (params= "action=check" ) public void checkUser(HttpServletResponse response,String userName) { Message msg = new Message(); msg.setSuccess( false ); boolean isExist = registerManager .checkUserByName(userName ); if (isExist) { //如果用户名存在 msg.setSuccess( true ); msg.setDescription( "用户名已经存在" ); } DirectlyRenderUtils. renderJson(response, msg); } } |
结束。。。