Ajax bajo Jquery en la serie de interacción front-end y back-end

prefacio

Este artículo explica Ajax bajo Jquery. Jquery no se usa mucho hasta ahora, pero algunos proyectos antiguos aún usan Jquery, por lo que es necesario comprender cómo usar Jquery para realizar la interacción con ajax. Y Jquery encapsula ajax, que es más fácil de usar que Ajax nativo, y el formato de sintaxis está más sesgado hacia Axios convencional.

Al leer este artículo, debe conocer Jquery, es una biblioteca de JavaScript que encapsula js para facilitar el uso de js. Si quieres saberlo, puedes consultar el documento: jQuery Tutorial

Esta sección explica Ajax basado en Jquery. Si tiene preguntas sobre Ajax nativo, puede consultar el blog: El uso de Ajax nativo en la serie de interacción front-end y back-end

Jquery envía solicitud Ajax

1. Importa el archivo jquery

Hay dos formas principales de importar archivos, una es descargar el documento jquery del sitio web oficial y luego importar; la otra es usar CDN para importar:

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

Este blog adopta la forma de introducción de CDN para presentar Jquery.

2. Estructura de la página

Tenemos tres usos de ajax bajo jq, que envían solicitudes de obtención, solicitudes de publicación y métodos generales, por lo que la estructura de la página es la siguiente:

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

Efecto:

3. Enviar solicitud de obtención

Primero, actualicemos el código relacionado con la solicitud de obtención en segundo plano:

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

Luego, la página principal inicia una solicitud de obtención:

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

El formato del código de la interfaz es el anterior. Después de hacer clic en el botón, el primer parámetro es la URL de solicitud, el segundo parámetro es el parámetro pasado, el apellido del parámetro pasado es un objeto y el tercer parámetro es una función de devolución de llamada para recibir el valor de respuesta del servidor.
El efecto de impresión final:

4. Enviar una solicitud de publicación

La forma de enviar una solicitud de publicación es muy similar a get. Sigue siendo lo mismo, primero actualice el código de fondo, aquí devolvemos un objeto:

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

El primer plano envía una solicitud y los parámetros recibidos deben procesarse:

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

El efecto final:

5. Método común

Este método puede enviar una solicitud de obtención o una solicitud de publicación y llamar a la función ajax.Dentro de la función hay un objeto, y dentro del objeto hay una URL, datos, tipo y una función de devolución de llamada exitosa.

            $('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)
                    }
                })
            })

efecto final:

Resumir

Lo anterior es cómo usar ajax bajo jquery. Esta serie de artículos todavía tiene mucho contenido enriquecido, como ajax nativo, axios, promesa, nodejs, etc., que se actualizarán lentamente en el futuro. Bienvenido a prestar atención.