为什么ajax没有将数据传到后端呢，导致后端为空值

你好，我现在在做一个登录页面，用ajax用post方法将数据传到后台，结果呢，发现，传过去的数据为空值，这是为什么呢？
这是前端ajax和js代码在页面login.html里，将数据传到login1。

var a= $("#username").val();
    var b=$("#passwords").val();
    var c=$("#yanzheng").val();
    console.log(a+"#"+b+"#"+c);
    $.ajax({
      type: 'post',
      url: './login1',
      async: true,
      error: '重新请求',
      contentType: "application/json;charset=utf-8",
      datatype: 'json',
      data: {
    "username":$("#userName").val(),"passwords":$("#password").val(),"yanzheng":$("#yanzheng").val(),
      },
      success: function (res) {

      },
      error: function (res) {

      }
    })
  })

这是html相关代码

<div style="width: 30%;height: 30%" id="log">
  <img src="/image/saturn.png" height="34%" width="34%"/>
  <form id="login" name="login" th:object="${pwd}" method="post"> <!--th:action="@{/loginyanzheng}"-->
    <label>用户名</label>
    <input type="text" id="username" name="username" style="font-size: 18px"></input><br>
    <label>密码</label>
    <input type="password" id="passwords" name="passwords" style="font-size: 18px;margin-left: 16px"></input><br>
    <label>验证码</label>
    <input type="text" id="yanzheng" name="yanzheng" style="font-size: 18px"></input><br>
    <div>
    <input type="button" id="sub" value="确认" style="font-size: 18px"></input>
    <input type="button" id="yz" value="验证码" style="font-size: 18px"></input>
    <input type="button" id="exit" value="退出" style="font-size: 18px"></input>
    </div>
  </form>
</div>

这是后端Controller代码。发现这里的username,passwords,yanzheng这三个值根本没有传过来，为空值。这是为什么呢？

@PostMapping("/login1")
    @CrossOrigin
    @ResponseBody
       public String loginresult(@RequestParam(value = "username",defaultValue = "")String username,
                                 @RequestParam(value = "passwords",defaultValue = "")String passwords,
                                 @RequestParam(value = "yanzheng",defaultValue = "")String yanzheng){
           System.out.println(username+"#"+passwords+"#"+yanzheng);
           return "success";
        }