1一乐

V1

2022/01/26阅读:57主题:默认主题

JQuery发送Ajax请求、ajax使用fetch函数(返回值是Promise对象)



一、JQuery发送Ajax请求

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

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


(1)jquery-server的get请求:

  • 客户端html处理:

        //$.get(url, [data], [callback], [type])

        $('button').eq(0).click(function ({
           //$get方法的回调参数接收一个data作为参数---是服务端响应回来的数据(响应体),然后设置响应的数据格式为json
           $.get('http://127.0.0.1:8000/jquery-server', {a:1b: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'小黑',
            age18,
            sex'男'
        };
        //设置响应体
        response.send(JSON.stringify(data));
    });

(2)jquery-server的post请求:

  • 客户端html处理:

        //$.post(url, [data], [callback], [type])

        $('button').eq(1).click(function ({
            //$get方法的回调参数接收一个data作为参数---是服务端响应回来的数据(响应体),然后设置响应的数据格式为json
            $.post('http://127.0.0.1:8000/jquery-server', {a:1b: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'小白',
            age18,
            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,//超时设置
             successfunction (data{//请求成功的回调
                 console.log(data);
             },
             errorfunction ({//请求失败的回调
                 console.log('请求出错');
             }
         });
      });
  • 服务端jquery-server请求的处理:

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

(4) jQuery 发送jsonp请求:

  • 客户端html处理:
 <button>点击发送 jsonp 请求</button>
 <div id="result"></
div>

 <script>
    $('button').eq(0).click(function(){
  // jquery封装的ajax的jsonp请求需要有一个callback参数
        $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?'function(data){
            $('#result').html(`
                名称: ${data.name}<br>
                 校区: ${data.city}
             `
);
        });
     });
 
</script>
  • 服务端jquery-server请求的处理:
app.all('/jquery-jsonp-server',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name:'小明',
        city: ['北京','上海','深圳']
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //接收 callback 参数
    let cb = request.query.callback;

    //返回结果
    response.end(`${cb}(${str})`);
});



二、ajax使用fetch函数(类似axios,返回值是Promise对象)

  • 客户端html处理:

    btn2.onclick = function ({
            fetch('http://127.0.0.1:8000/fetch-server?a=1&b=2',{
                method'post',
                headers: {
                    'Content-Type''application/x-www-form-urlencoded'
                },
                //请求体body(数据格式可以是字符串,也可以是json对象)
                // body: 'name=小明&age=16&sex=男'
                body: {
                    name'小明',
                    age16,
                    sex'男'
                }
            }).then(response => {
                //若响应回来的数据格式是字符串,响应回来的数据,需要通过text方法转化一下,json格式的话,则需要通过json方法转化一下
                return response.text();
                // return response.json();
            }).then(response => {
                console.log(response);
            })
        }
  • 服务端fetch函数的请求处理:

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

分类:

前端

标签:

前端

作者介绍

1一乐
V1