vue part3.3 ajax (axios) 及页面异步显示

App.vue

<template>
  <div>
    <div v-if="!repoName">loading</div>
    <div v-else>most start repo is <a :href="repoUrl">{{repoName}}</a></div>
  </div>
</template>

<script>
import axios from ‘axios‘
export default {
  data () {
    return {
      repoUrl: ‘‘,
      repoName: ‘‘
    }
  },
  mounted () {
    const url = ‘https://api.github.com/search/repositories?q=v&sort=stars‘
    axios.get(url).then(response => {
      const result = response.data
      const mostRepo = result.items[0]
      this.repoUrl = mostRepo.html_url
      this.repoName = mostRepo.name
    }).catch(error => {
      alert(‘请求失败‘)
    })
  }

}

</script>

<style>

</style>

原文地址:https://www.cnblogs.com/infaaf/p/9684047.html

时间: 2024-10-10 03:52:42

vue part3.3 ajax (axios) 及页面异步显示的相关文章

Vue导航栏在特定的页面不显示~

最近写vue项目遇到一些问题,我把导航栏组件放在了app.vue中,让他在每个页面都能显示了,但遇到了一个问题,在登录以及注册页面导航栏是不合理不允许存在的 解决方法: 公共模块的内容可以放在App.vue中但是通常登录页面是不需要导航的,那么就需要规避登录页 这时,就可以采用keep-alive结合$route.meta来实现这个功能.keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染.$route.meta则可以选择让需要的页面才展示.修改App.v

vue中使用Ajax(axios)

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求.Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios中文文档库:http://www.axios-js.com/zh-cn/docs/ 1.Axios简单使用 1.axios发送简单的get请求 后台: @RequestMapping("/index") @ResponseBody public Map index(HttpServletRequest req

使用$.ajax方式实现页面异步访问,局部更新的效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.3.1.min.js"></script> <script> function fun() { $.ajax({ url:&qu

对于ajax更新的页面,如何实现离线浏览? 一则方案尝试。

背景 现代页面上越来越多的内容是通过ajax更新, 因为页面可以显示的更加快速, 局部更新, 同时可以实现页面内容的动态性, 增加页面的内容的丰富性. 但是如果将页面内容保存下来, 以备离线浏览器查看, 则由于ajax存在的原因, 直接使用保存的方法不能实现, 因为会有ajax访问禁用的报错. 对于非ajax页面, 页面上内容仅仅使用 链接组织资源的情况, 页面的内容是完整的,  则浏览器保存下来的内容是完整的, 则可以在本地使用离线版本浏览. 方案思路 分析现有页面使用ajax更新的 方法,

vue实战使用ajax请求后台数据(小白)

vue实战使用ajax请求后台数据(小白) 前言:前端小白入门到这个阶段,应该会知道我们所做的页面上那些数据,绝大部分都不是静态的数据,而是通过调用后台接口把数据渲染到页面上的效果.ajax可以帮助我们更好的去实现这一点,下面是详解在vue中如何使用它. vue本身它是不支持直接发送ajax请求的,需要用到axios(一个基于promise的HTTP库,可以用在浏览器和node.js中)这是Axios文档的介绍,详细可查看:https://www.kancloud.cn/yunye/axios/

$.ajax,axios,fetch三种ajax请求的区别

Ajax是常用的一门与Web服务器通信的技术,目前发送Ajax请求的主要有4种方式: 原生XHR jquery中的$.ajax() axios fetch 至于原生的XHR目前工作中已经很少去手写它了,前些年我们比较常用的是jquery的ajax请求,但是近些年前端发展很快,jquery包装的ajax已经失去了往日的光辉,取而代之的是新出现的axios和fetch,两者都开始抢占“请求”这个前端重要领域.本文结合自己的使用经历总结一下它们之间的一些区别,并给出一些自己的理解. 1.Jquery

Vue.js&mdash;&mdash;基于$.ajax实现数据的跨域增删查改

概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax请求来完成的. 说起ajax请求,大家第一时间会想到jQuery.除了拥有强大的DOM处理能力,jQuery提供了较丰富的ajax处理方法,它不仅支持基于XMLHttpRequest的ajax请求,也能处理跨域的JSONP请求. 之前有读者问我,Vue.js能结合其他库一起用吗?答案当然是肯定的,V

jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法

1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是"application/json", (3)data传递的数据必须是严格的json数据,如"{'a':'aa','b':'bb'}",而且参数必须和静态方法的参数一 一对应 (4)aspx的后台方法返回的数据默认形式是"{'d':'返回的内容'}",所

Jquery Ajax调用aspx页面方法

原文:Jquery Ajax调用aspx页面方法 在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通过aspx.cs中的静态方法+WebMethod进行处理: 3)文艺玩法:通过WCF进行处理. 第一种和第三种方法不在本文介绍范围之内,下面重点介绍第二种方法. 说明 在我们的印象里 asp.net的Web服务是以.asmx来结尾的,而我们现在的asp.net也能实现Web服务,这是因为默认Web.