使用Jquery-easyUI的datagrid從后台加載數據不成功的解決辦法

最近在用easyUI做一個注冊頁面總是出現從后台數加載不成功的問題，后來在一個師兄的指導下通過debug模式終於發現問題並解決了，以下記錄我解決這一問題的過程。開發環境:jdk1.7，工具:eclipse,框架:spring-mvc

 spring-mvc的配置代碼

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:aop="http://www.springframework.org/schema/aop" xmlns:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:p="http://www.springframework.org/schema/p"
    xmlns:tx="http://www.springframework.org/schema/tx" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd
        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd">
    <!-- 開啟注解功能 -->
    <mvc:annotation-driven validator="validator" />

    <!-- 開啟組件掃描 @controller @service @compent -->
    <context:component-scan base-package="com.zsrt">
    </context:component-scan>
    <!-- 配置視圖解析器 -->
    <bean id="internalResourceViewResolver"
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!-- 配置jsp的前綴 /代表 webContent -->
        <property name="prefix" value="/WEB-INF/pages/">
        </property>
        <property name="suffix" value=".jsp">
        </property>
    </bean>

    <mvc:resources location="/js/" mapping="/js/**" />
    <!-- 上傳 -->
    <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="utf-8"></property>
        <property name="maxUploadSize" value="10485760000"></property>
        <property name="maxInMemorySize" value="40960"></property>
    </bean>

    <!-- 服務器端驗證 -->
    <bean id="validatemessageSource"
        class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
        <property name="basename" value="classpath:validatemessages" />
        <property name="fileEncodings" value="utf-8" />
        <property name="cacheSeconds" value="120" />
    </bean>
    <bean id="validator"
        class="org.springframework.validation.beanvalidation.LocalValidatorFactoryBean">
        <property name="providerClass" value="org.hibernate.validator.HibernateValidator" />
        <!--不設置則默認為classpath下的 ValidationMessages.properties -->
        <property name="validationMessageSource" ref="validatemessageSource" />
    </bean>

    <!-- 攔截器 
    <mvc:interceptors>
        
        <mvc:interceptor>
            <mvc:mapping path="/**" />
            <bean class="com.zsrt.intercepter.AuthHandlerInterceptor"></bean>

        </mvc:interceptor>
        
        <mvc:interceptor>
            <mvc:mapping path="/**" />
            <bean class="com.zsrt.intercepter.AuthHandlerInterceptor2"></bean>

        </mvc:interceptor>
    </mvc:interceptors>-->
</beans>

spring-mybatis的配置代碼

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:aop="http://www.springframework.org/schema/aop" xmlns:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:p="http://www.springframework.org/schema/p"
    xmlns:tx="http://www.springframework.org/schema/tx" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd
        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd">
    <!-- 開啟注解功能 -->
    <mvc:annotation-driven validator="validator" />

    <!-- 開啟組件掃描 @controller @service @compent -->
    <context:component-scan base-package="com.zsrt">
    </context:component-scan>
    <!-- 配置視圖解析器 -->
    <bean id="internalResourceViewResolver"
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!-- 配置jsp的前綴 /代表 webContent -->
        <property name="prefix" value="/WEB-INF/pages/">
        </property>
        <property name="suffix" value=".jsp">
        </property>
    </bean>

    <mvc:resources location="/js/" mapping="/js/**" />
    <!-- 上傳 -->
    <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="utf-8"></property>
        <property name="maxUploadSize" value="10485760000"></property>
        <property name="maxInMemorySize" value="40960"></property>
    </bean>

    <!-- 服務器端驗證 -->
    <bean id="validatemessageSource"
        class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
        <property name="basename" value="classpath:validatemessages" />
        <property name="fileEncodings" value="utf-8" />
        <property name="cacheSeconds" value="120" />
    </bean>
    <bean id="validator"
        class="org.springframework.validation.beanvalidation.LocalValidatorFactoryBean">
        <property name="providerClass" value="org.hibernate.validator.HibernateValidator" />
        <!--不設置則默認為classpath下的 ValidationMessages.properties -->
        <property name="validationMessageSource" ref="validatemessageSource" />
    </bean>

    <!-- 攔截器 
    <mvc:interceptors>
        
        <mvc:interceptor>
            <mvc:mapping path="/**" />
            <bean class="com.zsrt.intercepter.AuthHandlerInterceptor"></bean>

        </mvc:interceptor>
        
        <mvc:interceptor>
            <mvc:mapping path="/**" />
            <bean class="com.zsrt.intercepter.AuthHandlerInterceptor2"></bean>

        </mvc:interceptor>
    </mvc:interceptors>-->
</beans>

 

以下為實體類代碼：

package com.zsrt.entity;

import javax.persistence.Table;

@Table(name="person_info")
public class PersonInfoDTO {

    private String id;
    private String name;
    private String sex;
    private String province;//省
    private String city;//市
    private String phone;
    private String accNum;
    private String email;
    
    
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getSex() {
        return sex;
    }
    public void setSex(String sex) {
        this.sex = sex;
    }
    public String getProvince() {
        return province;
    }
    public void setProvince(String province) {
        this.province = province;
    }
    public String getCity() {
        return city;
    }
    public void setCity(String city) {
        this.city = city;
    }
    public String getPhone() {
        return phone;
    }
    public void setPhone(String phone) {
        this.phone = phone;
    }
    public String getAccNum() {
        return accNum;
    }
    public void setAccNum(String accNum) {
        this.accNum = accNum;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    @Override
    public String toString() {
        return "PersonInfoDTO [id=" + id + ", name=" + name + ", sex=" + sex + ", province=" + province + ", city="
                + city + ", phone=" + phone + ", accNum=" + accNum + ", email=" + email + "]";
    }


    
    
    
    
}

package com.zsrt.entity;

import java.util.Date;

import org.hibernate.validator.constraints.NotEmpty;
import org.springframework.format.annotation.DateTimeFormat;

public class Emp {
    public Date getBirthday() {
        return birthday;
    }
    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }
    private Integer empid;    
    private String accNum;
    private String accPass;
    private String empName;
    private String empPhone;
    
    private Date birthday;
    private Integer deptid ;
    private Integer roleid;
    private String email;
    
    public Integer getEmpid() {
        return empid;
    }
    public void setEmpid(Integer empid) {
        this.empid = empid;
    }
    public String getAccNum() {
        return accNum;
    }
    public void setAccNum(String accNum) {
        this.accNum = accNum;
    }
    public String getAccPass() {
        return accPass;
    }
    public void setAccPass(String accPass) {
        this.accPass = accPass;
    }
    public String getEmpName() {
        return empName;
    }
    public void setEmpName(String empName) {
        this.empName = empName;
    }
    public String getEmpPhone() {
        return empPhone;
    }
    public void setEmpPhone(String empPhone) {
        this.empPhone = empPhone;
    }
    public Integer getDeptid() {
        return deptid;
    }
    public void setDeptid(Integer deptid) {
        this.deptid = deptid;
    }
    public Integer getRoleid() {
        return roleid;
    }
    public void setRoleid(Integer roleid) {
        this.roleid = roleid;
    }
    
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    @Override
    public String toString() {
        return "Emp [empid=" + empid + ", accNum=" + accNum + ", accPass=" + accPass + ", empName=" + empName
                + ", empPhone=" + empPhone + ", birthday=" + birthday + ", deptid=" + deptid + ", roleid=" + roleid
                + ", email=" + email + "]";
    }
    
    
}

Emp的擴展類

package com.zsrt.entity;

public class EmpCustom extends Emp{
private int nextRoleid;
private String roleName;
public int getNextRoleid() {
return nextRoleid;
}
public void setNextRoleid(int nextRoleid) {
this.nextRoleid = nextRoleid;
}
public String getRoleName() {
return roleName;
}
public void setRoleName(String roleName) {
this.roleName = roleName;
}
}

package com.zsrt.entity;

import javax.persistence.Table;
public class DictDTO {
    private String id;
    private String itemCode;
    private String itemName;
    private String typeCode;
    private String status;
    private String parentCode;
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getItemCode() {
        return itemCode;
    }
    public void setItemCode(String itemCode) {
        this.itemCode = itemCode;
    }
    public String getItemName() {
        return itemName;
    }
    public void setItemName(String itemName) {
        this.itemName = itemName;
    }
    public String getTypeCode() {
        return typeCode;
    }
    public void setTypeCode(String typeCode) {
        this.typeCode = typeCode;
    }
    public String getStatus() {
        return status;
    }
    public void setStatus(String status) {
        this.status = status;
    }
    public String getParentCode() {
        return parentCode;
    }
    public void setParentCode(String parentCode) {
        this.parentCode = parentCode;
    }

    
    
}

personInfoDTO在數據庫中對應的表,表明為person_info

Emp類在數據庫中對應的表,表命名為oa_emp

 dict字典表

插入數據后

 

由於數據庫內容太多，而sql語句沒有及時保存，所以就不一一截圖了，插入數據的原理是屬於一個省的城市其parentCode為該省所對應的itemCode

 DAO層代碼

package com.zsrt.emp.dao;

import java.util.List;

import com.zsrt.entity.PersonInfoDTO;

/**
 * personinfoDAO
 * @author leixin
 * @Date 2017年5月22日
 * @version 1.0
 */
public interface PersonInfoDAO {
    
    int insert(PersonInfoDTO personInfoDTO);

    List<PersonInfoDTO> selectByPerson(PersonInfoDTO personInfoDTO);
    
    PersonInfoDTO checkAccNum(String accNum);
    
    
}

package com.zsrt.emp.dao;

import java.util.List;

import com.zsrt.entity.DictDTO;

/**
 * 字典表DAO
 * @author leixin
 * @Date 2017年5月22日
 * @version 1.0
 */
public interface DictDAO {
    
    List<DictDTO> selectByDictDTO(DictDTO dictDTO);
    
    String queryItemName(String itemCode);
}

Mapper層代XML碼

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zsrt.emp.dao.DictDAO">
    <select id="selectByDictDTO" parameterType="com.zsrt.entity.DictDTO"
    resultType="com.zsrt.entity.DictDTO">
        SELECT * FROM `dict`
        WHERE 1=1 
        <if test="typeCode !=null and typeCode != ''">
            AND typeCode = #{typeCode}
        </if>
        <if test="parentCode !=null and parentCode != ''">
            AND parentCode = #{parentCode}
        </if>
    </select>
    
    <select id="queryItemName" parameterType="java.lang.String" resultType="java.lang.String">
        SELECT itemName FROM `dict` WHERE itemCode=#{itemCode}
    </select>
</mapper>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.zsrt.emp.dao.PersonInfoDAO">
    <resultMap type="com.zsrt.emp.dao.PersonInfoDAO" id="personMap">
        <id column="id" property="id"></id>
        <result column="accNum" property="accNum"></result>
        <result column="name" property="name"></result>
        <result column="sex" property="sex"></result>
        <result column="province" property="province"></result>
        <result column="city" property="city"></result>
        <result column="phone" property="phone"></result>
        <result column="email" property="email"></result>
   </resultMap>

    <insert id="insert" parameterType="com.zsrt.entity.PersonInfoDTO">
        INSERT INTO `person_info` (
            `id`,
            `name`,
            `sex`,
            `province`,
            `city`,
            `phone`,
            `accNum`,
            `email`
        )
        VALUES
            (
                #{id},
                #{name},
                #{sex},
                #{province},
                #{city},
                #{phone},
                #{accNum},
                #{email}
            )
    </insert>
    
    <select id="selectByPerson" parameterType="com.zsrt.entity.PersonInfoDTO" 
    resultMap="personMap">
        SELECT
            `id`,`name`,`sex`,`province`,`city`,`phone`,`accNum`,`email`
        WHERE
            1 = 1
        <if test="name != null and name !='' ">
            AND `name` = #{name}
        </if>
        <if test="phone !=null and phone !=''">
            AND phone = #{phone}
        </if>    
    </select>
    <!-- 檢查注冊賬號是否重復 -->
    <select id="checkAccNum" parameterType="java.lang.String" resultType="com.zsrt.entity.PersonInfoDTO">
        SELECT * FROM person_info WHERE accNum=#{accNum} 
    </select>
    
</mapper>

Service層代碼

package com.zsrt.emp.service;

import java.util.List;

import com.zsrt.entity.DictDTO;

public interface DictService {

    List<DictDTO> selectByDictDTO(DictDTO dictDTO);
    
    String queryItemName(String itemCode);
}

package com.zsrt.emp.service;

import java.util.List;
import java.util.Map;

import com.zsrt.entity.PersonInfoDTO;

public interface PersonInfoService {

    Map<String, Object> insert(PersonInfoDTO personInfoDTO);

    List<PersonInfoDTO> selectByPerson(PersonInfoDTO personInfoDTO);
    
    PersonInfoDTO checkAccNum(String accNum);
}

對應的服務層實現類

package com.zsrt.emp.service.impl;

import java.util.List;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import com.zsrt.emp.dao.DictDAO;
import com.zsrt.emp.service.DictService;
import com.zsrt.entity.DictDTO;
@Service
public class DictServiceImpl implements DictService{

    @Resource
    private DictDAO dictDAO;
    
    @Override
    public List<DictDTO> selectByDictDTO(DictDTO dictDTO) {
        
        return dictDAO.selectByDictDTO(dictDTO);
    }

    @Override
    public String queryItemName(String itemCode) {
        
        return dictDAO.queryItemName(itemCode);
    }

}

package com.zsrt.emp.service.impl;

import java.util.List;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import com.zsrt.emp.dao.DictDAO;
import com.zsrt.emp.service.DictService;
import com.zsrt.entity.DictDTO;
@Service
public class DictServiceImpl implements DictService{

    @Resource
    private DictDAO dictDAO;
    
    @Override
    public List<DictDTO> selectByDictDTO(DictDTO dictDTO) {
        
        return dictDAO.selectByDictDTO(dictDTO);
    }

    @Override
    public String queryItemName(String itemCode) {
        
        return dictDAO.queryItemName(itemCode);
    }

}

發生錯誤前控制層代碼

package com.zsrt.emp.controller;

import java.util.ArrayList;

import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.UUID;

import javax.annotation.Resource;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSON;
import com.zsrt.emp.service.DictService;
import com.zsrt.emp.service.EmpService;
import com.zsrt.emp.service.PersonInfoService;
import com.zsrt.entity.PersonInfoDTO;

@Controller
@RequestMapping(value="/person")
public class PersonInfoController {
    @Resource
    private PersonInfoService personInfoService;
    
    @Resource
    private DictService dictService;
    
    @Resource
    private EmpService empService;
    
    @RequestMapping(value="/init")
    public String init() {
        return "person";
    }
    
    @RequestMapping(value="/list")
    @ResponseBody
    public Map<String, Object> list(PersonInfoDTO personInfoDTO){
        Map<String, Object> result = new HashMap<>();
        List<PersonInfoDTO> list = personInfoService.selectByPerson(personInfoDTO);
        result.put("rows", list);
        result.put("total", 100);
        System.err.println(result.toString());
        return result;
    }
    
    @RequestMapping(value="/save")
    @ResponseBody
    public Map<String, Object> save(PersonInfoDTO personInfoDTO,Model model){
        personInfoDTO.setId(UUID.randomUUID().toString().replace("-", ""));
        String provinceCode=personInfoDTO.getProvince();
        String province=dictService.queryItemName(provinceCode);
        personInfoDTO.setProvince(province); 
        String cityCode=personInfoDTO.getCity();
        String city=dictService.queryItemName(cityCode);
        personInfoDTO.setCity(city);
        Map<String, Object> result = personInfoService.insert(personInfoDTO);
        System.out.println(personInfoDTO.toString());
        Map<String,Object> personInfoMap=new HashMap<>();
        if(result.containsKey("success")){
            
            if(null==personInfoDTO.getPhone()||"".equals(personInfoDTO.getPhone())){
                String phone=empService.queryEmpByAccnum(personInfoDTO.getAccNum()).getEmpPhone();
                personInfoDTO.setPhone(phone);
            }
            if(null==personInfoDTO.getEmail()|| "".equals(personInfoDTO.getEmail())){
                String email=empService.queryEmpByAccnum(personInfoDTO.getAccNum()).getEmail();
            }
            List<PersonInfoDTO> personList=new ArrayList<PersonInfoDTO>();
            personList.add(personInfoDTO);
            personInfoMap.put("rows", personList);
            personInfoMap.put("total", 10);
            model.addAttribute("personInfoMap",JSON.toJSONString(personInfoMap));
        System.out.println("個人信息JSON字符竄："+JSON.toJSONString(personInfoMap));
            
        }
        return result;
    }
    
    @RequestMapping(value="/checkAccNum")
    @ResponseBody
    public Object checkAccNum(String accNum){
        PersonInfoDTO personInfo=personInfoService.checkAccNum(accNum);
        Map<String,Object> result=new HashMap<>();
        System.out.println("注冊帳號wei:"+accNum);
        
        if(null==personInfo){
            result.put("success", "帳號可用");
        }
        else{
            System.out.println("是否重復信息"+personInfo.toString());
            result.put("error", "帳號重復,不能注冊");
        }
        return result;
        
    }
    
    @RequestMapping(value="/showPersonInfo")
    public String showPersonInfo(){
        
        return "PersonReg";
    }
    
    
    
}

前台注冊頁面代碼,需求如下

前提條件：
1.在現有項目的基礎上做
2.給person_info表中增加一個accNum字段，表示兩張表的關聯關系
3.給oa_emp表中增加郵箱字段，同時在person_info表中增加郵箱字段

1.做一個注冊功能，注冊采用手機號,注冊成功之后跳轉到個人信息頁面，
並且顯示個人信息，若注冊失敗，則頁面顯示錯誤消息 （20分）

2.個人信息顯示中手機號和郵箱的兩種情況：
a.person_info表中沒有手機號和郵箱信息，將oa_emp中的信息取出顯示在頁面上 （20分)
b.person_info表中有手機號和郵箱信息，直接顯示person_info表中的信息 (20分)
將性別、省市、正確顯示在頁面上 （20分）

公共樣式 common.jsp文件代碼

<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<% String context = request.getContextPath();%>
<script type="text/javascript"> 
    var contextPath='<%=context%>';    
</script>
<script type="text/javascript" src="<%=context%>/js/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%=context%>/js/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=context%>/js/jquery-easyui/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
<link rel="stylesheet" href="<%=context%>/js/jquery-easyui/themes/default/easyui.css" />
<link rel="stylesheet" href="<%=context%>/js/jquery-easyui/themes/icon.css" />

注冊頁面reg.jsp代碼

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="common.jsp" %>
<!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>注冊頁面</title>

<script type="text/javascript">
    
    
   /* $.extend($.fn.validatebox.defaults.rules, {    
        testAccNum: {    
            validator: function(value, param){
                var reg1=/^[1][3,4,5,7,8]\d{9}$/;
                var reg2=/^[a-zA-Z0-9_]{3,}@[a-z0-9]{2,6}.[a-z]{2,4}([a-z]{2})?$/;
                return  param[reg1].test(value) || param[reg2].test(value); 
            },    
            message: '注冊帳號格式不正確.'   
        },
        testPhone:{
            validator:function(value,param){
                var reg=/^[1][3,4,5,7,8]\d{9}$/;
                return param[reg].test(value);
            },
            message:'手機號碼格式錯誤.'
        }
    });*/  
    
    
    $(function(){
            $("input",$('#accNum').next("span")).blur(function(){
            var accNum=$('#accNum').val();
            console.log(accNum);
            if(accNum==''){
                $('#accNumSpan').html("<font color='red'>注冊帳號不能為空！</font>"); 
                return false;
            }
            var reg1=/^[1][3,4,5,7,8]\d{9}$/;
            var reg2=/^[a-zA-Z0-9_]{3,}@[a-z0-9]{2,6}.[a-z]{2,4}([a-z]{2})?$/;
            if(!reg1.test(accNum) && !reg2.test(accNum)){
               $('#accNumSpan').html("<font color='red'>注冊帳號不是手機號或郵箱！</font>");
                 return false;
            }
            //驗證z注冊帳號是否重復
            $.ajax({
                url:'${pageContext.request.contextPath}/person/checkAccNum',
                type:'POST',
                data:{"accNum":accNum},
                dataType:'json',
                success:function(data){
                    var obj=JSON.parse(data);
                    if(obj.success){
                        console.log(obj.success);
                       $('#accNumSpan').html("<font color='green'>帳號可用</font>"); 
                    }
                    else{
                       console.log(obj.error);
                       $('#accNumSpan').html("<font color='red'>帳號重復,不可用</font>");
                       return false;
                    }
                }
            });  //end ajax 
            
            
        });   //end accNumblur()
        
       $("input",$('#accNum').next("span")).focus(function(){
           $.messager.show({
               title:'提示信息',
               msg:'帳號請優先選擇您的手機號碼，其次也可選擇您的郵箱',
               timeout:5000,
               showType:'slide'
               
           });
        $('#accNumSpan').html("<font color='green'>&nbsp;</font>");
        
       }); 
        
           /*var sex=$(':input[name="sex"]:checked').val();
           console.log(sex); */
           
  });
    
    /*var checkPhone=function(){
        $("input",$('#phone').next("span")).blur(function(){
            var phone=$('#phone').val();
            if(phone==''){
                $('phoneSpan').html("<font color='red'>手機號為空</font>");
                
            }
            else{
                console.log(phone);
            }
            
            
        });
    }*/
    
    
 
    var register=function(){
        $('#regForm').form('submit',{
            url:'${pageContext.request.contextPath}/person/save',
            
            onSubmit:function(){
                
                return true;    
                
            }, //end onSubmit
            success:function(data){
                var dataObj=JSON.parse(data);
                if(dataObj.success){
                    console.log(dataObj.success);
                    self.location=contextPath+"/person/showPersonInfo";
                }
                else{
                    alert("注冊失敗!");
                }
                
                
            }//end success
            
                
            
        }); //end form
        
    }//end register
    

</script>
</head>
<body>
<div align="center" style="margin-top:120px;">
    <div class="esayui-panel" title="注冊" style="width:400px;height:800px;" data-options="border:false">
    <form name="regForm" id="regForm" method="post" action="">
        <table style="margin-top:40px;" align="center">
            <tr>
                <td>賬號：</td>
                <td><input id="accNum" name="accNum" class="easyui-textbox" data-options="required:true,icoCls:'icon-man'"><span id="accNumSpan"></span>
                </td>
            </tr>
            <tr>
                <td>姓名：</td>
                <td><input calss="easyui-textbox" name="name"/><span id="nameSpan"></span></td>
            </tr>
            <tr>
                <td>性別：</td>
                <td><input type="radio" name="sex" value="M"/>男
                    <input type="radio" name="sex" value="F"/>女
                </td>
            </tr>
                <td>省：</td>
                <td><select name="province" class="easyui-combobox" style="width: 173px"
                    data-options="valueField:'itemCode',textField:'itemName',url:'${pageContext.request.contextPath}/dict/selectList?typeCode=region_province',
                     onSelect: function(data){  
                             console.info(data);
                             $('#city').combobox('clear');
                             var url = '${pageContext.request.contextPath}/dict/selectList?typeCode=region_city&parentCode='+data.itemCode;
                             console.log(data.itemCode);
                             $('#city').combobox('reload',url);
                        }">
                    </select>
                </td>
            <tr>
                <td>市：</td>
                <td>
                  <select id="city" name="city" class="easyui-combobox" style="width: 173px"
                      data-options="valueField:'itemCode',textField:'itemName'">
                  </select>
                </td>
            </tr>
            <tr>
                <td>手機號碼：</td>
                <td><input id="phone" name="phone" class="easyui-textbox" ><span id="phoneSpan"></span></td>
            </tr>
            <tr>
                <td>郵箱：</td>
                <td><input name="email" class="easyui-validatebox" validType="email" invalidMessage="郵箱格式錯誤!"/></td>
            </tr>
            <tr>
               <td><a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="register()">注冊</a></td>
               <td align="right"><input type="reset" name="reset" value="重置"></td>
            </tr>
        </table>
    </form>
    </div>
</div>
</body>
</html>

跳轉頁面PersonReg.jsp文件代碼

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../../common.jsp" %>
<!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>個人注冊信息</title>
<script type="text/javascript">
    $(document).ready(function(){
        var obj=${personInfoMap};
        $('#dg').datagrid('loadData',obj);
    });
    
    var closeDialog=function(){
        $('#editDialog').dialog('close');
    }
    var openDialog=function(){
        console.log(111);
        $('#editDialog').dialog('open');
    }
    
   var save=function(){
        
    }
    //驗證內容
    $(function(){
           $("input",$('#accNum').next("span")).blur(function(){
           var accNum=$('#accNum').val();
           console.log(accNum);
           if(accNum==''){
               $('#accNumSpan').html("<font color='red'>注冊帳號不能為空！</font>"); 
               return false;
           }
           var reg1=/^[1][3,4,5,7,8]\d{9}$/;
           var reg2=/^[a-zA-Z0-9_]{3,}@[a-z0-9]{2,6}.[a-z]{2,4}([a-z]{2})?$/;
           if(!reg1.test(accNum) && !reg2.test(accNum)){
              $('#accNumSpan').html("<font color='red'>注冊帳號不是手機號或郵箱！</font>");
                return false;
           }
           //驗證z注冊帳號是否重復
           $.ajax({
               url:'${pageContext.request.contextPath}/person/checkAccNum',
               type:'POST',
               data:{"accNum":accNum},
               dataType:'json',
               success:function(data){
                   
                   if(data.success){
                       console.log(data.success);
                      $('#accNumSpan').html("<font color='green'>帳號可用</font>"); 
                   }
                   else{
                      console.log(data.error);
                      $('#accNumSpan').html("<font color='red'>帳號重復,不可用</font>");
                      return false;
                   }
               }
           });  //end ajax 
           
           
       });   //end accNumblur()
       
      $("input",$('#accNum').next("span")).focus(function(){
          $.messager.show({
              title:'提示信息',
              msg:'帳號請優先選擇您的手機號碼，其次也可選擇您的郵箱',
              timeout:5000,
              showType:'slide'
              
          });
       $('#accNumSpan').html("<font color='green'>&nbsp;</font>");
       
      }); 
       
          /*var sex=$(':input[name="sex"]:checked').val();
          console.log(sex); */
          
 });
    
    
    
    
</script>
</head>
<body>
<div class="easyui-panel" title="個人信息顯示" align="center" data-options="border:false" >
    
    <table id="dg" align="center" class="easyui-datagrid" data-options="toolbar:'#tb',pagination:true,url:''">
        <thead>   
                <tr> 
                    <th data-options="field:'ck',checkbox:true"></th>  
                    <th data-options="field:'id'">id</th>   
                    <th data-options="field:'accNum'">accNum</th>   
                    <th data-options="field:'name'">name</th>
                    <th data-options="field:'sex'">sex</th>
                    <th data-options="field:'province'">province</th>
                    <th data-options="field:'city'">city</th>
                    <th data-options="field:'phone'">phone</th>
                    <th data-options="field:'email'">email</th>
                </tr>   
            </thead>
    </table>
</div>
    <div id="tb">
        <a class="easyui-linkbutton" onclick="openDialog()" data-options = "iconCls:'icon-edit'">修改個人信息</a>
    </div>
    <div id="dialogButton">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="closeDialog()">取消</a>
        <a class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="save()">保存</a>
    </div>
    <div id="editDialog" class="easyui-dialog" title="修改個人信息" data-options="closed:true,buttons:'#dialogButton'" style="width:300px;height:600px;">
        <div class="easyui-panel">
            <form name="editForm" id="editForm" action="" method="post">
                <table style="margin-top:40px;" align="center">
            <tr>
                <td>賬號：</td>
                <td><input id="accNum" name="accNum" class="easyui-textbox" data-options="required:true"><span id="accNumSpan"></span>
                </td>
            </tr>
            <tr>
                <td>姓名：</td>
                <td><input calss="easyui-textbox" name="name"/><span id="nameSpan"></span></td>
            </tr>
            <tr>
                <td>性別：</td>
                <td><input type="radio" name="sex" value="M"/>男
                    <input type="radio" name="sex" value="F"/>女
                </td>
            </tr>
                <td>省：</td>
                <td><select name="province" class="easyui-combobox" style="width: 173px"
                    data-options="valueField:'itemCode',textField:'itemName',url:'${pageContext.request.contextPath}/dict/selectList?typeCode=region_province',
                     onSelect: function(data){  
                             console.info(data);
                             $('#city').combobox('clear');
                             var url = '${pageContext.request.contextPath}/dict/selectList?typeCode=region_city&parentCode='+data.itemCode;
                             console.log(data.itemCode);
                             $('#city').combobox('reload',url);
                        }">
                    </select>
                </td>
            <tr>
                <td>市：</td>
                <td>
                  <select id="city" name="city" class="easyui-combobox" style="width: 173px"
                      data-options="valueField:'itemCode',textField:'itemName'">
                  </select>
                </td>
            </tr>
            <tr>
                <td>手機號碼：</td>
                <td><input id="phone" name="phone" class="easyui-textbox" ><span id="phoneSpan"></span></td>
            </tr>
            <tr>
                <td>郵箱：</td>
                <td><input name="email" class="easyui-validatebox" validType="email" invalidMessage="郵箱格式錯誤!"/></td>
            </tr>
        </table>
    </form>
        </div>
    </div>
    
    ${personInfoMap}
</body>
</html>

以上還有一些功按鈕能還沒有實現

注冊頁面效果圖

 

 跳轉后頁面加載數據失敗效果圖

通過debug調試發現前台reg.jsp頁面的${personInfoMap}為空，原來是因為Model保存的Map對象 personInfoMap 只能在頁面跳轉一次的時候才取得到，
而下面這個save方法包含了兩次跳轉頁面,一次是題提交表單時的url請求（url:'${pageContext.request.contextPath}/person/save'）
另一次為result返回給success回調函數時的跳轉（self.location=contextPath+"/person/showPersonInfo"）
解決辦法為把 personInfoMap定義為一個全局變量，放到showPersonInfo()方法里

@RequestMapping(value="/save")
    @ResponseBody
    public Map<String, Object> save(PersonInfoDTO personInfoDTO,Model model){
        personInfoDTO.setId(UUID.randomUUID().toString().replace("-", ""));
        String provinceCode=personInfoDTO.getProvince();
        String province=dictService.queryItemName(provinceCode);
        personInfoDTO.setProvince(province);
        String cityCode=personInfoDTO.getCity();
        String city=dictService.queryItemName(cityCode);
        personInfoDTO.setCity(city);
        
        Map<String, Object> result = personInfoService.insert(personInfoDTO);
        System.out.println(personInfoDTO.toString());
        if(result.containsKey("success")){
            Map<String,Object> personInfoMap=new HashMap<>();
            if(null==personInfoDTO.getPhone()||"".equals(personInfoDTO.getPhone())){
                String phone=empService.queryEmpByAccnum(personInfoDTO.getAccNum()).getEmpPhone();
                personInfoDTO.setPhone(phone);
            }
            if(null==personInfoDTO.getEmail()|| "".equals(personInfoDTO.getEmail())){
                String email=empService.queryEmpByAccnum(personInfoDTO.getAccNum()).getEmail();
            }
            List<PersonInfoDTO> personList=new ArrayList<PersonInfoDTO>();
            personList.add(personInfoDTO);
            personInfoMap.put("rows", personList);
            personInfoMap.put("total", 10);
            model.addAttribute("personInfoMap",JSON.toJSONString(personInfoMap));
            System.out.println("個人信息JSON字符竄："+JSON.toJSONString(personInfoMap));
        }
        return result;
    }

修改后的PersonInfoController類的代碼如下

@Controller
@RequestMapping(value="/person")
public class PersonInfoController {
    @Resource
    private PersonInfoService personInfoService;
    
    @Resource
    private DictService dictService;
    
    @Resource
    private EmpService empService;
    
    Map<String,Object> personInfoMap=new HashMap<>();
    
    @RequestMapping(value="/init")
    public String init() {
        return "person";
    }
    
    @RequestMapping(value="/list")
    @ResponseBody
    public Map<String, Object> list(PersonInfoDTO personInfoDTO){
        Map<String, Object> result = new HashMap<>();
        List<PersonInfoDTO> list = personInfoService.selectByPerson(personInfoDTO);
        result.put("rows", list);
        result.put("total", 100);
        System.err.println(result.toString());
        return result;
    }
    
    @RequestMapping(value="/save")
    @ResponseBody
    public Map<String, Object> save(PersonInfoDTO personInfoDTO){
        personInfoDTO.setId(UUID.randomUUID().toString().replace("-", ""));
        String provinceCode=personInfoDTO.getProvince();
        String province=dictService.queryItemName(provinceCode);
        personInfoDTO.setProvince(province);
        String cityCode=personInfoDTO.getCity();
        String city=dictService.queryItemName(cityCode);
        personInfoDTO.setCity(city);
        
        Map<String, Object> result = personInfoService.insert(personInfoDTO);
        System.out.println(personInfoDTO.toString());
        if(result.containsKey("success")){
            
            if(null==personInfoDTO.getPhone()||"".equals(personInfoDTO.getPhone())){
                String phone=empService.queryEmpByAccnum(personInfoDTO.getAccNum()).getEmpPhone();
                personInfoDTO.setPhone(phone);
            }
            if(null==personInfoDTO.getEmail()|| "".equals(personInfoDTO.getEmail())){
                String email=empService.queryEmpByAccnum(personInfoDTO.getAccNum()).getEmail();
            }
            List<PersonInfoDTO> personList=new ArrayList<PersonInfoDTO>();
            personList.add(personInfoDTO);
            personInfoMap.put("rows", personList);
            personInfoMap.put("total", 10);
            
        }
        return result;
    }
    
    @RequestMapping(value="/checkAccNum")
    @ResponseBody
    public Object checkAccNum(String accNum){
        PersonInfoDTO personInfo=personInfoService.checkAccNum(accNum);
        Map<String,Object> result=new HashMap<>();
        System.out.println("注冊帳號wei:"+accNum);
        
        if(null==personInfo){
            result.put("success", "帳號可用");
        }
        else{
            System.out.println("是否重復信息"+personInfo.toString());
            result.put("error", "帳號重復,不能注冊");
        }
        return result;
        
    }
    
    @RequestMapping(value="/showPersonInfo")
    public String showPersonInfo(Model model){
        model.addAttribute("personInfoMap",JSON.toJSONString(personInfoMap));
        System.out.println("個人信息JSON字符竄："+JSON.toJSONString(personInfoMap));
        return "PersonReg";

    }
    
 
}

修改后的效果圖如下：

必須要注意的時用加載到easyui-datagrid的表格里去時后台傳遞數據時必須用JSON格式，后台控制層結果列表personList作為rows鍵的value值，回到前台再把personINfoMap轉為Jquery對象${personInfoMap}才能去除加載到datagrid表格里去