SpringMVC后端@RequestParam接收值为null AJAX提交手机号排障

问题排查 #

错误1：后端参数接收注解使用错误 #

你当前方法参数用的是@ModelAttribute，该注解用于将请求参数绑定到自定义模型对象上，不适合接收单个字符串类型的请求参数，你需要替换成@RequestParam("phoneNumber")。如果后续想接收JSON格式的请求体，才需要用@RequestBody。

错误2：前端AJAX请求参数格式配置错误 #

• 你直接把手机号字符串赋值给obj.data，没有携带参数名phoneNumber，后端无法匹配对应参数
• 你设置了contentType: false和processData: false，这两个配置仅在使用FormData传递二进制/表单数据时需要开启，普通参数传递不需要这两个配置
• dataType配置错误，dataType指的是预期后端返回的数据类型，填json即可，不需要填application/json
• 你注释掉的FormData方案里参数名写对了，但取值选择器写错了，用了$("#storeOpenTime").val()而非手机号输入框的值

修复方案 #

1. 修改后端Controller代码 #

@Controller
@RequestMapping("/indoUser")
public class UserController {
    @ResponseBody
    @RequestMapping(value="/validate-phn",method = RequestMethod.POST)
    // 替换@ModelAttribute为@RequestParam
    public APIResponseModal checkPhonePresent(@RequestParam("phoneNumber") String phoneNumber) {
        logger.info("Check Phone Method");
        logger.info(phoneNumber);
        List<String> errorList = new ArrayList<String>();
        APIResponseModal apiResponse = new Utils().getDefaultApiResponse();
        try {
            if(Utils.isNotNull(phoneNumber)) {
                Boolean isExists =  userService.phoneNumberExists(phoneNumber, errorList);
                if(isExists) {
                    apiResponse.setMessage("Number already Present please login with OTP !");
                    apiResponse.setStatus(HttpStatus.BAD_REQUEST);
                }else {
                    apiResponse.setMessage("Number is New ");
                    apiResponse.setStatus(HttpStatus.OK);
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return apiResponse;
    }
}

2. 修改前端AJAX请求代码checkPhoneNumber方法 #

function checkPhoneNumber(){
    console.log("Check phone is called")
    let phone = document.getElementById("phoneNumber").value;
    console.log("Value of phone is :" + phone);
    var obj = new MasterAjax();
    obj.requestType = "POST";
    obj.url = "indoUser/validate-phn";
    // 传入带参数名的对象
    obj.data = {
        phoneNumber: phone
    };
    // 删掉错误的contentType和processData配置
    // obj.contentType = false;
    // obj.processData = false;
    // 修改dataType为json
    obj.dataType= "json";
    obj.requestData(function(responseData){
        console.log(responseData);
        if(responseData.status == "OK" || responseData.status == "ok"){
            console.log(responseData)
        }else{
            console.log(responseData)
        }
    }); 
}

如果你的MasterAjax封装默认是传JSON格式的请求体，那你需要把后端注解改成@RequestBody String phoneNumber，同时前端把data改成JSON字符串即可：

obj.data = JSON.stringify(phone);
obj.contentType = "application/json";

内容的提问来源于stack exchange，提问作者shivam sharma