使用ajax报405错误

今天照葫芦画瓢学着使用ajax，

前端代码如下：

<form id="form1" >
      <table width="90%" class="tab2" align="center">
        <tr>
          <td align="right">用户名：</td>
          <td><input type="text" value="" name="username" id="username" class="input5" />
            &nbsp;<font class="font_blue">*</font></td>
          <td>
        </tr>
        <tr>
          <td align="right">登录密码：</td>
          <td><input type="text" value="" class="input7" name="password" id="password"/>
            &nbsp;<font class="font_blue">*</font></td>
          <td>
        </tr>
        <tr>
          <td align="right">重复输入密码：</td>
          <td><input type="text" value="" name="rePassword" id="rePassword" class="input7" />
            &nbsp;<font class="font_blue">*</font></td>
          <td>
        </tr>
        <tr>
          <td align="right">电子邮箱：</td>
          <td><input type="text" value=""  name="email" id="email" class="input4" />
            &nbsp;<font class="font_blue">*</font></td>
          <td>
        </tr>
        <tr>
          <td align="right">手机号码：</td>
          <td><input type="text" value=""  name="phone" id="phone" class="input4" /></td>
          <td>
        </tr>
      </table>
      <div class="button4">
        <input type="button" class="button6" id="submit"/>
        <input type="reset" class="button5" value="重置" />
      </div>
    </form>

<script>
  $(function () {

      var data ={
          username:'$("#username").val()',
          password:'$("#password").val()',
          rePassword:'$("#rePassword").val()',
          email:'$("#email").val()',
          phone:'$("#phone").val()'
      };
      $('#submit').click(function () {
          $.ajax({
              type:"POST",
              url:"/register/function",
              data:data,
              dataType:"json",
              contentType: 'application/json',
              success:function (data) {
              }
          })
      })
  })
</script>

 

后台代码是以JSON格式接收的，代码如下：

    @PostMapping("/register/function")
    public String register(@Valid @RequestBody RegisterForm registerForm){
        if(registerForm.getPassword().isEmpty()){
            String massage="密码不能为空";
        }
        return "redirect:/index";
    }

public class RegisterForm {
    private String username;
    private String password;
    private String rePassword;
    private String email;
    private String phone;

    ...

}

 

 

然后一直报405错误，后台提示JSON转换失败，报错内容如下：

Resolved [org.springframework.http.converter.HttpMessageNotReadableException:
JSON parse error: Unrecognized token 'username': was expecting 
(JSON String, Number, Array, Object or token 'null', 'true' or 'false'); 
nested exception is com.fasterxml.jackson.core.JsonParseException: 
Unrecognized token 'username': was expecting 
(JSON String, Number, Array, Object or token 'null', 'true' or 'false')
 at [Source: (PushbackInputStream); line: 1, column: 10]]

后来请教了前端大佬，发现是ajax在传参数的时候没有转成String，原来传送的data传的是一个JSON对象

把data转成字符串就可以了

<script>
  $(function () {

      var data ={
          username:'$("#username").val()',
          password:'$("#password").val()',
          rePassword:'$("#rePassword").val()',
          email:'$("#email").val()',
          phone:'$("#phone").val()'
      };
      $('#submit').click(function () {
          $.ajax({
              type:"POST",
              url:"/register/function",
              data:JSON.stringify(data),  //JSON对象转成Json字符串
              dataType:"json",
              contentType: 'application/json',
              success:function (data) {
              }
          })
      })
  })
</script>

 

笔记：

data:{"name":name,"sex":sex},
data的值是一个对象

data:"{\"name\":\""+name+"\",\"sex\":\""+sex+"\"}",
data的值是一个字符串

另外，使用ajax时，form标签中就不要写action了，提交按钮的type也不能用submit了（即不要用type=“submit”），要改成普通的button（即type=“button”）

 

---

另外，大佬不推荐使用$ajax，他推荐使用axios

  <script src="https://cdn.bootcss/axios/0.19.0-beta.1/axios.min.js"></script>

于是，我上面的那种传参方式可以改写成：

<script>
  $(function () {
        
    var data ={
         username:'$("#username").val()',
         password:'$("#password").val()',
         rePassword:'$("#rePassword").val()',
         email:'$("#email").val()',
         phone:'$("#phone").val()'
    };
    
    $('#submit').click(function () {
          //get方法
          axios.get("/register/function", data).then(function(res) {
              console.log('then', res);
          }).catch(function(res) {
              console.log('catch', res);
          });


          //post方法,url不带参数aaa
          axios.post("/register/function", data, {}).then(function(res) {
              console.log('then', res);
          }).catch(function(res) {
              console.log('catch', res);
          });

          //post方法,url后带参数aaa
          axios.post("/register/function", data, {params: {
                  aaa:1,
              }
          }).then(function(res) {
              console.log('then', res);
          }).catch(function(res) {
              console.log('catch', res);
          });

      })
  })
</script>