Jquery中实现表单提交到SSM后台前进行post请求实现数据的校验

野性酷女 2023-10-18 21:44 65阅读 0赞

## 场景 ##

表单中有两个输入框input在提交这个表单前需要对两个输入框进行校验。

即点击提交按钮时会经过校验的方法，此方法会post方式提交到后台，在请求后台成功后的回调方法中会对js变量进行赋值，进而决定是否提交此表单。

## 实现 ##

### html代码 ###

1.form元素的的action属性为验证通过后提交的url。

2.onsubmit属性为返回一个验证方法的值，如果此方法的返回值为true则提交此表单，如果为false则不提交。

3.表单中有一个表单提交的按钮button,点击此按钮提交表单时会触发onsubmit事件，会根据方法的返回值决定是否提交表单。

### Jquery中进行校验的代码 ###

1.获取两个输入框的值。

2.声明返回值变量，用来控制方法的返回值，根据post请求的返回结果来决定此方法的返回值，

所以poist请求要通过 async:false 设置为同步。

3.返回值变量默认为false即默认是不能提交的，只有当post请求后返回的状态码2为200时才将其更改为true。

代码：

### 后台SSM代码 ###

1.后台接受到请求的参数并将其转换为String类型。

2.然后调用具体的service方法查询这两个输入 框的内容是否相同或者其他限制。

@ResponseBody
     @RequestMapping("/validateIsGuoNeiAll")
     public Map<String, Object> validateIsGuoNeiAll(@RequestBody Map<String, Object>  params) throws IllegalAccessException, InvocationTargetException, NoSuchMethodException{
      
      Map<String, Object> result = new HashMap<String, Object>();
      Object guojiStrart = params.get("guojiStrart");
      Object guojiEnd = params.get("guojiEnd");
      String guojiStrart1="";
         if(guojiStrart!=null){
            guojiStrart1=guojiStrart.toString();
         }
         String guojiEnd1="";
         if(guojiStrart!=null){
          guojiEnd1=guojiEnd.toString();
          } 
         Boolean isGuoneiAll =  this.service.validateIsGuoNeiAll(guojiStrart1,guojiEnd1);
         if(isGuoneiAll) {
           result.put("statusCode",  "300");
           result.put("message",  "起飞与降落机场不能都为国内机场或相同");
         }else {
           result.put("statusCode",  "200");
         }
       
      return result;
      
      
     }

### 具体Service实现类代码 ###

1.获取两个输入框的内容，然后截取获取括号中三字码。

2.判断这两个三字码相同则直接返回true。

3.然后将这两个实体类对象根据三字码查询出来如果都是国内机场则返回true。

@Override
     public Boolean validateIsGuoNeiAll(String guojiStrart, String guojiEnd) throws IllegalAccessException, InvocationTargetException, NoSuchMethodException {
      guojiStrart= guojiStrart.substring(guojiStrart.indexOf("(")+1,guojiStrart.length()-1);
      guojiEnd= guojiEnd.substring(guojiEnd.indexOf("(")+1,guojiEnd.length()-1);
      if(guojiStrart.equals(guojiEnd)) {
       return true;
      }
      
      PassAddrAirport passAddrAirport = dao.getAirportByThreeCode(guojiStrart);
      PassAddrAirport passAddrAirport2 = dao.getAirportByThreeCode(guojiEnd);
      if(passAddrAirport.getCountryId()==Constants.CONNTRYID_GUONEI&&passAddrAirport2.getCityId()==Constants.CONNTRYID_GUONEI) {
       return true;
      }else {
       return false;
      }
      
     }