• Vue.js的AJAX


    [

    Vue.js中,Vue 要实现异步加载需要使用到 vue-resource 库, 如下:

    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

    我们可以通过Vue.js的AJAX的get和post请求来了解。

    Vue.js的AJAX的get请求

    以下是一个简单的 Get 请求实例,请求地址是一个简单的 txt 文本:

         提示:可以修改代码后运行

    Vue.js的AJAX的post请求

    post 发送数据到后端,需要第三个参数 {emulateJSON:true}

    emulateJSON 的作用: 如果Web服务器无法处理编码为 application/json 的请求,你可以启用 emulateJSON 选项。

         提示:可以修改代码后运行

    Vue.js的AJAX的语法&API

    你可以使用全局对象方式 Vue.http 或者在一个 Vue 实例的内部使用 this.$http来发起 HTTP 请求。

    // 基于全局Vue对象使用http
    Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
    Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
    
    // 在一个Vue实例内使用$http
    this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
    this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
    

    vue-resource 提供了 7 种请求 API(REST 风格):

    get(url, [options])
    head(url, [options])
    delete(url, [options])
    jsonp(url, [options])
    post(url, [body], [options])
    put(url, [body], [options])
    patch(url, [body], [options])
    

    除了 jsonp 以外,另外 6 种的 API 名称是标准的 HTTP 方法。

    options 参数说明:

    参数 类型 描述
    url string 请求的目标URL
    body ObjectFormDatastring 作为请求体发送的数据
    headers Object 作为请求头部发送的头部对象
    params Object 作为URL参数的参数对象
    method string HTTP方法 (例如GET,POST,...)
    timeout number 请求超时(单位:毫秒) (0表示永不超时)
    before function(request) 在请求发送之前修改请求的回调函数
    progress function(event) 用于处理上传进度的回调函数 ProgressEvent
    credentials boolean 是否需要出示用于跨站点请求的凭据
    emulateHTTP boolean 是否需要通过设置X-HTTP-Method-Override头部并且以传统POST方式发送PUT,PATCH和DELETE请求。
    emulateJSON boolean 设置请求体的类型为application/x-www-form-urlencoded

    通过如下属性和方法处理一个请求获取到的响应对象:

    属性 类型 描述
    url string 响应的URL源
    body ObjectBlobstring 响应体数据
    headers Header 请求头部对象
    ok boolean 当HTTP响应码为200到299之间的数值时该值为true
    status number HTTP响应吗
    statusText string HTTP响应状态
    方法 类型 描述
    text() 约定值 以字符串方式返回响应体
    json() 约定值 以格式化后的json对象方式返回响应体
    blob() 约定值 以二进制Blob对象方式返回响应体
    ]
  •   本文标题:Vue.js的AJAX - Break易站
    转载请保留页面地址:https://www.breakyizhan.com/vue/6711.html
  • 相关阅读:
    The formatter threw an exception while trying to deserialize the message in WCF
    通过Web Deploy方式部署WCF
    The Managed Metadata Service or Connection is currently not available
    How to create Managed Metadata Column
    冒泡算法
    asp.net core 实战项目(一)——ef core的使用
    Vue学习笔记入门篇——安装及常用指令介绍
    Vue学习笔记入门篇——数据及DOM
    Vue学习笔记目录
    Chart.js在Laravel项目中的应用
  • 原文地址:https://www.cnblogs.com/breakyizhan/p/13272564.html
Copyright © 2020-2023  润新知