easui框架搭建第二课

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'
					});
				}
			});
		}