将Ajax发送到控制器

Question

I am trying to get live validation on a register form that tells the user if the username they are trying has already been taken or not. I am using jQuery to detect change in the input and want to send the username they type as an AJAX to a Spring controller I have set up. Eventually it will plug it into a query and return if that username has already been registered. I am having trouble with the AJAX. Any ideas on how to accurately send the request?

My AJAX:

$(document).ready(() => {
    function checkPassword() {
        let usernameGiven = $("#username").val();
        $.post( "/check",
            {username: usernameGiven} ,
            function(data) {
            console.log(data)
        })

    }

    $('#username').on('input', () => {
        checkPassword()
    });

});

My Controller:

 @PostMapping("/check")
public String checkUsername(@RequestParam(name = "username") String username){

}

Answer 1

I haven't used jQuery in a long time but I don't think you can pass data with your post using that syntax. Try:

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

dataType is the type of data you expect back from the server (xml, json, script, text, html).

While you're testing this, make sure you're actually returning some data back from your controller too, even if it's just mock data for now.

Answer 2

Maybe can work if you use:

<input id="username" onBlur="checkIfUserExist()">

Make a javascript function:

function checkIfUserExist() {

     $.ajax({
          url: "/check",
          data:'username='+$("#username").val(),
          type: "POST",
          success:function(data){
          console.log(data); //content user availability status
     },
     error:function (){}
     });
   }
 }

Answer 3

Think I found what I was looking for. This is working for me. Let me know if you think there is a more efficient way of doing this.

@RestController
 public class TestController {

     @GetMapping("/getString")
      public String getString(@RequestParam(name = "username") String username) {

          return JSONObject.quote(username);
      }
 }