Using Ajax to submit data for data interaction between front and back stations

HTML code:

<input class="form-control" id="username" name="username" type="text"/>
<input class="form-control" id="password" name="password" type="password"/>

<button type="button" onclick="loginSubmit()">Sign in now</button>

jQuery Code:

function loginSubmit() {

        var username = $("#username").val();    // Get the < input > box data with id as username
        var password = $("#password").val();    // Get < input > box data with id as password
        // judge
        if (username.length == 0) {
            $("#username").tips({msg: "Please enter a user name."});
            return;
        }
        if (password.length == 0) {
            $("#password").tips({msg: "Please input a password."});
            return;
        }
        // Ajax submit data
        $.ajax({
            url: "admin/check_login",    // url path submitted to controller
            type: "post",    // Submission method
            data: {"username": username, "password": password},  // data is of String type, and must be in Key/Value format.
            dataType: "json",    // Data type returned by the server
            success: function (data) {    // The callback function after the successful request, in which the parameter data is the value returned by the controller
                if (data.message == "success") {    
                    //Jump to the system home page
                   ......
                } else {
                    ......
                }
            },
        });
    }

success callback function in Ajax:
success: function(data) is automatically called by Ajax after the request is successful, so this method is called by Ajax, so the parameter (data) of this method is provided by Ajax. The parameter data of function(data) is the value returned by the background when the client requests it.

Controller code:

    @RequestMapping(value = "check_login",method = RequestMethod.POST)
    @ResponseBody
    public Map checkLogin(
            @RequestParam(value = "username") String username,
            @RequestParam(value = "password") String password){
        Map<String,Object> map = new HashMap<>();
        // Call service to query database authentication login information
        ......
        // Judge whether the user exists
        if (user != null){
                map.put("message", "success");
                return map;
        } else {
            ......
        }
    }

Ajax will find the corresponding controller method according to its url, @ RequestParam will get the data from Ajax (that is: data: {"username": username, "password": password}), and pass it into the method parameter automatically. service can use parameter values to get data. After the controller method call is completed, AJAX will execute the success callback function to determine whether the value in the map returned by the controller is success.
The advantage of using Ajax submission instead of traditional form form submission is that Ajax communicates with the server asynchronously, does not need to interrupt the user's operation, and has a more rapid response ability.

Tags: JQuery JSON Database

Posted on Fri, 22 May 2020 08:43:56 -0700 by Alffallen