AJAX (5) — jQuery发送AJAX请求

jQuery发送AJAX请求

        分别使用GET、POST和通用方法ajax发送请求。使用Bootstrap搭建一个页面，分别按下三个按钮时发送GET、POST、通用方法ajax请求，页面如下：

         完成该需求需要准备前端与服务端内容，服务端的server.js页面如下：

//1.引入express
const { response } = require('express');
const express = require('express');

//2.创建应用对象
const app = express()

//3.创建路由规则
//jQuery响应
app.all('/jquery-server', (request, response) => {
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*')
    //设置响应体
    //  response.send('Hello jQuery AJAX')
    const data = { name: 'xupt' };
    response.send(JSON.stringify(data))
});

//4.监听端口启动服务
app.listen(5000, () => {
    console.log('服务已经启动，5000端口监听中....');
})

        html页面布局如下：

    <div class="container">
        <h2 class="page-header">jQuery发送AJAX请求</h2>
        <button type="button" class="btn btn-primary">GET</button>
        <button type="button" class="btn btn-danger">POST</button>
        <button type="button" class="btn btn-info">通用型方法ajax</button>
    </div>

  1.GET请求

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

  2.POST请求

$('button').eq(1).click(function () {
    $.post('http://127.0.0.1:5000/jquery-server', { a: 100, b: 200 }, function (data) {
        console.log(data);
    })
})

  3.通用方法ajax

    $('button').eq(2).click(function(){
            $.ajax({
                //url
                url:'http://127.0.0.1:5000/jquery-server',
                //参数
                data:{a:100,b:200},
                //请求类型
                type:'GET',
                //响应体结果
                dataType:'json',
                //成功的回调
                success:function(data){
                    console.log(data);
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error:function(){
                    console.log('出错了！！');
                },
                //头信息
                Headers:{
                    c:200,
                    d:200
                }
            })
        })