easui框架搭建第二课

一、实现用户注册的功能。

1.后台controller的实现：

  

    @RequestMapping(value = "/reg", method = { RequestMethod.POST,              RequestMethod.GET }/*, produces = {"application/json;charset=UTF-8"}*/)    @ResponseBody    public String reg(HttpServletRequest request, HttpServletResponse response) {        String name = request.getParameter("name");        String pwd = request.getParameter("pwd");        Map<String, Object> result = new HashMap<String, Object>();        User user = new User();        user.setId(UUID.randomUUID().toString());        user.setName(name);        user.setLoginName(name);        user.setCompanyId("1");        user.setOfficeId("1");        user.setPassword(pwd);        user.setCreateBy("1");        user.setCreateDate(new Date());        user.setUpdateBy("1");        user.setUpdateDate(new Date());        user.setDelFlag("0");        try {            //userService.insert(user);            result.put("success", true);            result.put("message", "注册成功！");        } catch (Exception e) {            e.printStackTrace();            logger.info("注册失败" + e.getMessage());            result.put("success", false);            result.put("message", "注册失败！");        }        request.setAttribute("user", user);        return JSON.toJSONString(result);    }

2.注册的form表单提交：

//初始化form$('#index_regForm').form({url : '${pageContext.request.contextPath}/userController/reg.do',// dataType : 'json',// contentType : 'application/json;charset=UTF-8',success : function(data) {var $data = $.parseJSON(data);console.info($data);alert($data.message);}});

3. 发现的问题：

通过之前的配置，发现在返回前台json的时候，通过

$.parseJSON(data);

无法解析为json数据，以致无法正常显示。

通过N种方法尝试，终于使firefox好用了，但是在ie下又出现乱码。。

最后终于通过修改spring-mvc.xml改好了》》》》》》》》修改如下：（注意替换之前的写法。）

<!-- 使用Annotation自动注册Bean,只扫描@Controller --><context:component-scan base-package="lucky.ssmm" use-default-filters="false"><!-- base-package 如果多个，用“,”分隔 --><context:include-filter type="annotation" expression="org.springframework.stereotype.Controller" /></context:component-scan><!-- 默认的注解映射的支持，org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping --><mvc:annotation-driven content-negotiation-manager="contentNegotiationManager"><mvc:message-converters register-defaults="true"><!-- 将StringHttpMessageConverter的默认编码设为UTF-8 --><bean class="org.springframework.http.converter.StringHttpMessageConverter"><constructor-arg value="UTF-8" /></bean><!-- 将Jackson2HttpMessageConverter的默认格式化输出为false --><bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"><property name="supportedMediaTypes"><list><value>application/json;charset=UTF-8</value></list></property><property name="prettyPrint" value="false" /><property name="objectMapper">                    <!-- jackson-databind-2.2.2.jar --><bean class="com.fasterxml.jackson.databind.ObjectMapper"><property name="dateFormat"><bean class="java.text.SimpleDateFormat"><constructor-arg value="yyyy-MM-dd HH:mm:ss" /></bean></property></bean></property></bean></mvc:message-converters></mvc:annotation-driven><!-- REST中根据URL后缀自动判定Content-Type及相应的View --><bean id="contentNegotiationManager" class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean"><property name="mediaTypes"><map><entry key="xml" value="application/xml" /><entry key="json" value="application/json" /></map></property><property name="ignoreAcceptHeader" value="true" /><property name="favorPathExtension" value="true" /></bean>

4. 增加前台页面的返回提示：

<pre name="code" class="java">success : function(data) {var $data = $.parseJSON(data);console.info($data.success);console.info($data.message);if ($data.success) {$('#index_regDialog').dialog('close');}$.messager.show({title : '提示',msg : $data.message,timeout : 5000,showType : 'slide'});}

5.修改数据不清空的解决方案：

5.1在dialog的open方法前加如下代码：

$('#index_regForm').form('load', {name:'', pwd:'', rpwd:''});$('#index_regDialog').dialog('open');

5.2 添加如下方法：

$('#index_regForm input').val('');$('#index_regDialog').dialog('open');

6. 使用ajax技术，实现注册:

$.ajax({url : '${pageContext.request.contextPath}/userController/reg.do',data : {name : $('#index_regForm input[name=name]').val(),pwd : $('#index_regForm input[name=pwd]').val()},success : function(data, textStatus, jqXHR) {var $data = $.parseJSON(data);console.info($data.success);console.info($data.message);if ($data.success) {$('#index_regDialog').dialog('close');}$.messager.show({title : '提示',msg : $data.message,timeout : 5000,showType : 'slide'});}});

6.1 完善ajax的注册实现：

注意：$('#index_regForm').serialize(), ==》》》》jquery用法，实现表单序列化，请自行脑补api....

$.ajax({url : '${pageContext.request.contextPath}/userController/reg.do',data : $('#index_regForm').serialize(),dataType : 'json',success : function(data, textStatus, jqXHR) {var $data = data;//$.parseJSON(data);console.info($data.success);console.info($data.message);if ($data.success) {$('#index_regDialog').dialog('close');}$.messager.show({title : '提示',msg : $data.message,timeout : 5000,showType : 'slide'});}});

6.2 由于使用ajax技术，无法使用easyui的验证功能，所以发送ajax请求前，需添加eaysui的验证功能，实现如下：

if ($('#index_regForm').form('validate')) {$.ajax({url : '${pageContext.request.contextPath}/userController/reg.do',data : $('#index_regForm').serialize(),dataType : 'json',success : function(data, textStatus, jqXHR) {var $data = data;//$.parseJSON(data);console.info($data.success);console.info($data.message);if ($data.success) {$('#index_regDialog').dialog('close');}$.messager.show({title : '提示',msg : $data.message,timeout : 5000,showType : 'slide'});}});}