原生的ajax+vue请求数据渲染数据

Posted 2023-03-09

参考技术A // 定义工具方法

let Util =

    /**

    * 发送异步请求

    * @url 请求的地址

    * @fn 请求成功时候的回调函数

    **/

    getData(url, fn)

        // 实例化xhr对象

        let xhr = new XMLHttpRequest();

        // 监听状态变化

        xhr.onreadystatechange = () =>

            // 监听数据请求完毕

            if (xhr.readyState === 4)

                // 判断状态码

                if (xhr.status === 200)

                    // 将数据转化成json字符串

                    fn && fn(JSON.parse(xhr.responseText))

               

           

       

        // 打开请求

        xhr.open('GET', url, true);

        // 发送数据

        xhr.send(null)

    ,

    postData(url, params, fn)

        // 实例化xhr对象

        let xhr = new XMLHttpRequest();

        // 监听状态变化

        xhr.onreadystatechange = () =>

            // 监听数据请求完毕

            if (xhr.readyState === 4)

                // 判断状态码

                if (xhr.status === 200)

                    // 将数据转化成json字符串

                    fn && fn(JSON.parse(xhr.responseText))

               

           

       

        // 打开请求

        xhr.open('POST', url, true);

        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=utf-8");

        // 发送数据

        xhr.send(params);

    ,

    /**

    * 将对象转化成query的形式

    * @obj 转化的对象 color:red, num:100

    * return ?color=red&num=100

    **/

    objToQuery(obj,type)

        type = type ? '':'?';

        let result = '';

        // 遍历对象，转化成json

        for (var i in obj)

            result += '&' + i + '=' + obj[i]

       

        // 去除最后一个&

        return type + result.slice(1)

   



new Vue(

  el:"#app",

  data:

    msg:"hello world",

    list:[]

  ,

  created:function()

    var that = this;

    // 提供post,get请求

    Util.getData("https://a.daxiangclass.com/offer.php/api/v1/interview?page=1&size=100",function(res)

        that.list = res.data;     

    );

 

)

item.title

<p>item.title</p>//渲染数据