学习AJAX必知必会(4)~JQuery发送Ajax请求
admin
撰写于 2022年 01月 22 日

一、JQuery发送Ajax请求

■ 对于get和post请求,jQuery内部封装了Ajax请求的4个步骤和数据格式的设置

■ 对于Ajax通用请求,jQuery内部封装了Ajax请求的4个步骤和数据格式设置、超时设置、请求失败设置

(1)jquery-server的get请求:

  • 客户端html处理:

        $('button').eq(0).click(function () {
    //$get方法的回调参数接收一个data作为参数---是服务端响应回来的数据(响应体),然后设置响应的数据格式为json
    $.get('http://127.0.0.1:8000/jquery-server', {a:1, b:2}, function (data) {
    console.log(data);
    }, 'json');
    });
  • 服务端jquery-server请求的处理:

    app.get('/jquery-server', (request, response) => {
    //设置响应头(允许跨域)
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应回去一个json对象
    const data = {
    name: '小黑',
    age: 18,
    sex: '男'
    };
    //设置响应体
    response.send(JSON.stringify(data));
    });

(2)jquery-server的post请求:

  • 客户端html处理:

        $('button').eq(1).click(function () {
    //$get方法的回调参数接收一个data作为参数---是服务端响应回来的数据(响应体),然后设置响应的数据格式为json
    $.post('http://127.0.0.1:8000/jquery-server', {a:1, b:2}, function (data) {
    console.log(data);
    }, 'json');
    });
  • 服务端jquery-server请求的处理:

    app.post('/jquery-server', (request, response) => {
    //设置响应头(允许跨域)
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应回去一个json对象
    const data = {
    name: '小白',
    age: 18,
    sex: '男'
    };
    //设置响应体
    response.send(JSON.stringify(data));
    });

(3)jquery-server的通用ajax请求:

  • 客户端html处理:

      $('button').eq(2).click(function () {
    $.ajax({
    url: 'http://127.0.0.1:8000/jquery-server/delay',//请求路径
    data: {a:1,b:2,c:3},//请求参数(请求体)
    type:'get',//请求方式
    headers:{'Content-Type': 'application/x-www-form-urlencoded'},//请求头
    dataType: 'json',//请求的数据格式
    timeout:4000,//超时设置
    success: function (data) {//请求成功的回调
    console.log(data);
    },
    error: function () {//请求失败的回调
    console.log('请求出错');
    }
    });
    });
  • 服务端jquery-server请求的处理:

    //jquery-server请求超时处理
    app.get('/jquery-server/delay', (request, response) => {
    //设置响应头(允许跨域)
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应回去一个json对象
    const data = {
    name: '小迟',
    age: 18,
    sex: '男'
    };
    //设置响应体
    setTimeout(() => {
    response.send(JSON.stringify(data));
    }, 3000)
    });

学习AJAX必知必会(4)~JQuery发送Ajax请求的

学习AJAX必知必会(4)~JQuery发送Ajax请求

一、JQuery发送Ajax请求

■ 对于get和post请求,jQuery内部封装了Ajax请求的4个步骤和数据格式的设置

■ 对于Ajax通用请求,jQuery内部封装了Ajax请求的4个步骤和数据格式设置、超时设置、请求失败设置

(1)jquery-server的get请求:

  • 客户端html处理:

        $('button').eq(0).click(function () {
    //$get方法的回调参数接收一个data作为参数---是服务端响应回来的数据(响应体),然后设置响应的数据格式为json
    $.get('http://127.0.0.1:8000/jquery-server', {a:1, b:2}, function (data) {
    console.log(data);
    }, 'json');
    });
  • 服务端jquery-server请求的处理:

    app.get('/jquery-server', (request, response) => {
    //设置响应头(允许跨域)
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应回去一个json对象
    const data = {
    name: '小黑',
    age: 18,
    sex: '男'
    };
    //设置响应体
    response.send(JSON.stringify(data));
    });

(2)jquery-server的post请求:

  • 客户端html处理:

        $('button').eq(1).click(function () {
    //$get方法的回调参数接收一个data作为参数---是服务端响应回来的数据(响应体),然后设置响应的数据格式为json
    $.post('http://127.0.0.1:8000/jquery-server', {a:1, b:2}, function (data) {
    console.log(data);
    }, 'json');
    });
  • 服务端jquery-server请求的处理:

    app.post('/jquery-server', (request, response) => {
    //设置响应头(允许跨域)
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应回去一个json对象
    const data = {
    name: '小白',
    age: 18,
    sex: '男'
    };
    //设置响应体
    response.send(JSON.stringify(data));
    });

(3)jquery-server的通用ajax请求:

  • 客户端html处理:

      $('button').eq(2).click(function () {
    $.ajax({
    url: 'http://127.0.0.1:8000/jquery-server/delay',//请求路径
    data: {a:1,b:2,c:3},//请求参数(请求体)
    type:'get',//请求方式
    headers:{'Content-Type': 'application/x-www-form-urlencoded'},//请求头
    dataType: 'json',//请求的数据格式
    timeout:4000,//超时设置
    success: function (data) {//请求成功的回调
    console.log(data);
    },
    error: function () {//请求失败的回调
    console.log('请求出错');
    }
    });
    });
  • 服务端jquery-server请求的处理:

    //jquery-server请求超时处理
    app.get('/jquery-server/delay', (request, response) => {
    //设置响应头(允许跨域)
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应回去一个json对象
    const data = {
    name: '小迟',
    age: 18,
    sex: '男'
    };
    //设置响应体
    setTimeout(() => {
    response.send(JSON.stringify(data));
    }, 3000)
    });

学习AJAX必知必会(4)~JQuery发送Ajax请求的

赞 (0)

猜您想看

评论区(暂无评论)

这里空空如也,快来评论吧~

我要评论