前端后端交互系列之Jquery下的Ajax

前言

本篇文章讲解的是Jquery下的Ajax。Jquery到现今用的不是很多，但是会有老的项目依旧使用Jquery，所以了解用Jquery实现利用ajax进行交互是有必要的。并且Jquery对ajax进行了封装，用起来比原生Ajax更简单，语法格式也更偏向于主流的Axios。

在看这篇文章时，需要对Jquery有所了解，它是一个JavaScript库，封装了js让js的使用更加简单。如果想要了解可以参考文档：jQuery教程

本节内容讲解的是以Jquery为主的Ajax。如果对原生Ajax有疑问，可以查看博客：前端后端交互系列之原生Ajax的使用

Jquery发送Ajax请求

1. 引入jquery文件

引入文件的主要方式有两种，一种是从官网上下载jquery文档，然后引入；另一种是使用CDN引入：

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

本篇博客采取的是CDN引入的方式引入Jquery。

2. 页面结构

我们一共要将jq下的ajax的三种用法，分别是发送get请求，post请求，和通用方法，所以页面结构如下：

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

效果：
在这里插入图片描述

3. 发送get请求

首先来更新下后台跟get请求相关的代码：

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

接着是前台页面发起get请求：

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

前台代码的格式如上。点击按钮后，第一个参数是请求url，第二个参数是传参，传参的姓氏是一个对象，第三个参数则是一个回调函数，接收服务器响应值。
最后的打印效果：
在这里插入图片描述

4. 发送post请求

发送post请求的方式于get十分类似。还是一样，先更新后台代码，这里我们传回去一个对象：

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

前台发送请求，收到的参数需要经过处理：

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

最后的效果：
在这里插入图片描述

5. 通用方法

这种方法可以发送get请求，也可以发送post请求，调用ajax函数，函数内部是一个对象，对象内部分别是url，data，和type以及成功的回调函数。

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