zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    TC(Total Commander)文件管理神器
    友盟 集成测试
    Channel SDK (渠道SDK) for Unity
    Prefab Assist插件
    Android资源(图片)命名规范
    FragmentTransaction的commit的异步操作
    面试2
    Git中.gitignore文件不起作用的解决以及Git中的忽略规则介绍
    Android必知必会-Android Studio修改包名
    Http标准协议Android网络框架——NoHttp
  • 原文地址:https://www.cnblogs.com/breakyizhan/p/13272564.html
Copyright © 2011-2022 走看看