Data exchange and interaction between front and back end

Time:2020-9-17

brief introduction

Front end data interaction.

Summarize the way of data exchange before and after.

No matter whether the project is separated or not, the data interaction between the front and the back is needed, so we should master a variety of data exchange methods to face different business requirements.

It is suggested that from shallow to deep, get (query), post (add), put (update), delete (delete), and finally follow the restful style of development.


Mode of exchange

  1. Form form submission method
  2. JSON submission mode
  3. Get request submission method
  4. Put update request mode
  5. Delete delete request mode

Post request

Form submission method

#Front end<form  action="/login" method="POST">
    <div>
        <label >account number:</label>
            <input type="text" name="uname" >
        </div>
    </div>
    <div >
        <label >password:</label>
            <input type="password" name="pwd">
        </div>
    </div>
    <div>
         <button type="submit" >Submit now</button>
        </div>
    </div>
</form>
#Back endPostMapping("/login")
    public String login(AdUser user){
        return "Submitted successfully";
    }

JSON submission mode

#Front end.ajax({
                url: "/login",    //The URL address of the request
                dataType: "json",   //The data format returned by the back end is JSON
                contentType : 'application/json',
                type: "POST",   //Request method
                data:JSON.stringify(data.field),//Format the form data JSON
                success: function (req) { //Processing after the back end response is successful
                    console.log(req)
                }

            });
#At the back end, the @ requestbody annotation accepts JSON dataPostMapping("/login")
    public String login(@RequestBody AdUser user){
        return "{code ':" 1 "," MSG ":" submitted successfully "}";
    }

Get request

Mode 1

#Front end.get("/findById",{id:"id"},function(data, textStatus){
             console.log(textStatus)
             console.log(data)
    });
#In the back end, @ requestparam annotation changes the parameters to http:www.baidu.com?id=1Methods bring parameters to the back endGetMapping("/findById")
    public String findById(@RequestParam("id")int id){
        return "{code ':" 1 "," MSG ":" query success "}";
    }

Mode 2

#Front end.get("/findById/"+id,function(data, textStatus){
             console.log(textStatus)
             console.log(data)
    });
#At the back end, the @ pathvariable annotation changes the parameters to http:www.baidu.com/1Methods bring parameters to the back endGetMapping("/findById/{id}")
    public String findById(@PathVariable("id")int id){
        return "{code ':" 1 "," MSG ":" query success "}";
    }

Recommended Today

How to share queues with hypertools 2.5

Share queue with swote To realize asynchronous IO between processes, the general idea is to use redis queue. Based on the development of swote, the queue can also be realized through high-performance shared memory table. Copy the code from the HTTP tutorial on swoole’s official website, and configure four worker processes to simulate multiple producers […]