JS中发请求获取数据做校验，实现弹窗提示，而不是发请求在后端验证导致页面数据刷新需要重新录入

目录

知识点：

开发功能介绍:

分析:

思路：

实现过程：

代码结果:

 效果：

---

知识点：

控制器中@RequestParam注解接参的使用

开发功能介绍:

人员新增功能有职级划分，新员工信息录入会精确到具体机构下具体团队中，而如果入司员工的职务类型是销售助理，那么就要对其加入的团队进行等级校验；因为看到最新的需求基本法里面提到，要规模达到七级的团队才能加入销售助理；（下图为员工信息录入页面职级部分）

分析:

1.可以在调后端add新增员工接口中，先取到输入框的职务类型和团队等级，去调一下员工等级相关表的impl查一下等级来再做一下判断，是不是要在七级以下的团队加入销售助理，如果判断不通过就把人员新增请求打回来！！！

2.这样做也不是不行，可是仔细想了一下，感觉这个解决办法对录入员工信息的人不太友好，因为新增员工的详情页面要填的信息太多了，整整一页，选了机构下拉框后，团队下拉框会筛选出这个机构下的团队供选择，而这个时候填写的人并不知道这些团队的等级，当选择好一个团队后，提交保存，数据发出去各种校验，请求最终打到后端，第一步却发现是要在低级团队内加入销售助理，又给打回来，那之前页面中填写的这么多数据又要重新录入！！！所以，个人感觉这个判断不能在后端做，而是要在请求发出之前做

思路：

这边在发请求之前做就要先找到页面，找到发请求之前的js，可以在页面数据收集的时候加个判断，如果判断是加入销售助理（CB）就调接口查一下所选团队等级，如果判断不通过的话写一个弹窗提示一下即可，就不用往后端发请求传递数据了，这样页面上填写的数据也可以得以保留，录入信息的人根据弹窗提示即可知道是哪里出了问题，微调数据即可。

实现过程：

这边先根据页面找到HTML

 

 找到tPerson.HTML页面上新增按钮调的对应tPerson.js中的openAddTPerson方法中的/tPerson/tPerson_add请求对应的TPersonController.java控制器中的tPersonAdd方法

 tPersonAdd方法去字典表取值(代码缩行)，最后携值绑定了tPerson_add.HTML页面

 找到tPerson_add.HTML页面上保存按钮调的对应tPerson_info.js中的add()方法

 tPerson_info.js中的add()方法最终发/tPerson/add请求请求方法最执行新增

 到这里找到了新增请求的发送，发现是直接的保存按钮直接调的js里面的add()方法中校验后发起的后端请求，根据之前的思路，这里给保存按钮换一个addSubmit新增校验方法，这个校验方法里面通过后再调add()方法,而不是直接去调add()方法

代码结果:

准备开始写校验方法:

 预计是这个里面先发带团队id发请求，到后端控制器获取团队等级，再通过职级和团队等级做判断；下面是数据库用到的表及字段含义：

 控制层方法：

 回到JS中发请求调这个接口：

/**
 * 提交添加前判断
 */
TPersonInfoDlg.addSubmit = function() {
    this.clearData();
    this.collectData();
    if (!this.validate()) {
        return;
    }

    var teamCode = $("#teamCode").val();
    var channelId = $("#channelId").val();
    console.log("(1)teamCode~输入框取值----------"+teamCode);/
    console.log("(2)channelId~输入框取值---------"+channelId);/

    let teamLevels = getTeamLevel();

    function getTeamLevel() {
        var  teamLevels = null;
        var ajax = new $ax(Feng.ctxPath + "/tTeam/level?teamCode=" + teamCode, function (data)  {
            teamLevels=data;
            Feng.info("获取成功!!")
        }, function (data) {
            Feng.error("操作失败!!");
        });
        ajax.start();
        return teamLevels;
    }
    console.log("(3)getTeamLevel()~if前值--------:"+getTeamLevel());//
    console.log("(4)teamLevel~if前取值-----------"+teamLevels);//
    if(getTeamLevel()<7&&"CB"==(channelId)){
        Feng.error("新增失败,只有七级团队才能添加销售助理!!!");
        return;
    }

    TPersonInfoDlg.add();
};

 效果：

信息填写完毕，选择一个二级团队，职级选择销售助理，点击保存按钮

页面会弹窗显示报错，但页面已填写数据不会刷新

 

 系统控制台：