Ajax under Jquery in the front-end and back-end interaction series

foreword

This article explains Ajax under Jquery. Jquery is not used much until now, but some old projects still use Jquery, so it is necessary to understand how to use Jquery to realize interaction with ajax. And Jquery encapsulates ajax, which is simpler to use than native Ajax, and the syntax format is more biased towards mainstream Axios.

When reading this article, you need to know about Jquery. It is a JavaScript library that encapsulates js to make the use of js easier. If you want to know, you can refer to the document: jQuery Tutorial

This section explains Ajax based on Jquery. If you have questions about native Ajax, you can check the blog: The use of native Ajax in the front-end and back-end interaction series

Jquery sends Ajax request

1. Import the jquery file

There are two main ways to import files, one is to download the jquery document from the official website, and then import; the other is to use CDN to import:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>

This blog adopts the way of CDN introduction to introduce Jquery.

2. Page structure

We have three usages of ajax under jq, which are sending get requests, post requests, and general methods, so the page structure is as follows:

    <div class="container">
        <h2>JQuery发送Ajax请求</h2>
        <button>GET</button>
        <button>Post</button>
        <button>通用</button>
    </div>

Effect:

3. Send get request

First, let’s update the code related to the get request in the background:

//jquery下的ajax后台代码如下
app.get('/jquery-server', (request, response) => {
    
    
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.send('Hello Jquery Ajax')
})

Then the front page initiates a get request:

            $('button').eq(0).click(() => {
    
    
                $.get('http://127.0.0.1:8000/jquery-server', {
    
     a: 100, b: 200 }, (data) => {
    
    
                    console.log(data);
                })
            })

The format of the frontend code is as above. After clicking the button, the first parameter is the request url, the second parameter is the passed parameter, the last name of the passed parameter is an object, and the third parameter is a callback function to receive the server response value.
The final print effect:

4. Send a post request

The way to send a post request is very similar to get. Still the same, first update the background code, here we pass back an object:

//post请求
app.post('/jquery-server', (request, response) => {
    
    
    response.setHeader('Access-Control-Allow-Origin', '*');
    const data = {
    
    name: '巧克力小猫猿'}
    response.send(JSON.stringify(data))
})

The foreground sends a request, and the received parameters need to be processed:

            $('button').eq(1).click(() => {
    
    
                $.post('http://127.0.0.1:8000/jquery-server', {
    
     a: 100, b: 200}, (data) => {
    
    
                    console.log(JSON.parse(data))
                })
            })

The final effect:

5. Common method

This method can send a get request, or a post request, and call the ajax function. Inside the function is an object, and inside the object are url, data, type and a successful callback function.

            $('button').eq(2).click(() => {
    
    
                $.ajax({
    
    
                    //url
                    url: 'http://127.0.0.1:8000/jquery-server',
                    //发送参数
                    data: {
    
    a: 200, b: 300},
                    //请求类型
                    type: 'GET',
                    //成功的回调
                    success: (data) => {
    
    
                        console.log(data)
                    }
                })
            })

Final effect:

Summarize

The above is how to use ajax under jquery. This series of articles still has a lot of rich content, such as native ajax, axios, promise, nodejs, etc., which will be updated slowly in the future. Welcome to pay attention.