찾다
웹 프론트엔드프런트엔드 Q&Avue는 ajax를 지원하나요?

vue 자체는 ajax 요청을 지원하지 않지만 "vue-resource", axios 및 기타 플러그인을 사용하여 vue를 구현하여 Ajax 요청을 보낼 수 있습니다. axios는 "vue" 요청을 보내는 데 사용되는 Promise 기반 HTTP 요청 클라이언트입니다. -resource"는 XMLHttpRequest 또는 JSONP를 사용하여 웹 요청을 만들고 응답을 처리하는 서비스를 제공하는 플러그인입니다.

vue는 ajax를 지원하나요?

이 튜토리얼의 운영 환경: Windows 10 시스템, Vue3 버전, Dell G3 컴퓨터.

vue는 ajax를 지원하나요?

vue 자체는 AJAX 요청 전송을 지원하지 않습니다.

를 구현하려면 vue-resource(vue1.0 버전), axios(vue2.0 버전) 및 기타 플러그인을 사용해야 합니다. axios는 Promise 기반 HTTP 요청입니다. 요청을 보내는 데 사용되는 클라이언트도 vue2.0에서 공식적으로 권장됩니다. 동시에 vue-resource는 더 이상 업데이트 및 유지 관리되지 않습니다. XMLHttpRequest 또는 JSONP 서비스를 사용하여 웹 요청을 제공하고 응답을 처리하는 Vue.js용입니다.

vue가 2.0으로 업데이트되었을 때 저자는 더 이상 vue-resource를 업데이트하지 않을 것이라고 발표했지만 여기에서 vue-resource에 대해 알아볼 수 있습니다.

vue는 axios를 사용하여 AJAX 요청을 보냅니다.

홈페이지에서 axios를 설치하고 소개

npm install axios -S
하거나 온라인으로 axios.min.js 파일을 직접 다운로드하고 src

<script></script>
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
Vue.prototype.$axios = axios;

*get request

를 통해 파일을 소개합니다. 1. 기본 사용 형식

형식 1: axios([options]) #이 형식은 모든 데이터를 options

형식 2: axios.get(url[,options])

2에 직접 씁니다.

URL을 통해 매개변수 전달

params 옵션을 통해 매개변수 전달

코드 조각:

<p>
    <input>
</p>
<p>
    <input>
</p>
<a>注册账号</a>
<p>
    <button>立即登录</button>
</p>
<script>
  export default {
    data:function(){
      return{
        none: false,
        loginForm: {
          loginName: &#39;&#39;,
          passWord: &#39;&#39;
        }
      }
    },
    methods: {
      gotoRegister:function(){
        this.$router.push({
          name:&#39;register&#39;
        });
      },
      doLogin(){
//接口  this.$axios.get(接口地址).then(function(respon){}).catch(function(error){})
        let _this = this;
        if (this.loginForm.loginName === &#39;&#39; || this.loginForm.passWord === &#39;&#39;) {
          alert(&#39;账号或密码不能为空&#39;);
        } else {
          this.$axios.get("/WebUserLogin",{
            params:_this.loginForm
          }).then(res=>{
            var result = JSON.parse(res.data);
            // console.log(result);
            if (result.state == &#39;ok&#39;) {
               // console.log(&#39;登陆成功&#39;);
               window.sessionStorage.setItem(&#39;token&#39;, result.token) //存入token
               _this.$router.push(&#39;/index&#39;);
            }else{
              alert(&#39;登录失败请检查用户名和密码是否正确&#39;);
            }
          }).catch(error => {
            alert(&#39;账号或密码错误&#39;);
            // console.log(error);
          });

        }

      }
    }
  }
</script>

*post 요청(푸시 및 삭제에 대한 비-get 요청은 동일)

형식: axios.post(url,data, [ 옵션]) 또는 axios([옵션])

<script>
  import qs from &#39;qs&#39;
  export default {
    data:function(){
      return{
        none: false,
        registerForm: {
          LoginName: &#39;&#39;,
          LoginPassword: &#39;&#39;
        }
      }
    },
    methods: {
        register(){
          let _this = this;
          if (this.registerForm.LoginName === &#39;&#39; || this.registerForm.LoginPassword === &#39;&#39;) {
            alert(&#39;注册信息不能空&#39;);
          } else {
            this.$axios({ 
              url:"/WebUserRegist",
              method:"post",
              data:qs.stringify(_this.registerForm)
            }).then(res=>{
              var result = JSON.parse(res.data);
              // console.log(result);
              if (result.state == &#39;ok&#39;) {
                 alert(&#39;注册成功去登录&#39;);
                 _this.$router.push(&#39;/&#39;);
              }else{
                alert(&#39;注册失败请检查注册信息是否正确&#39;);
              }
            }).catch(error => {
              alert(&#39;注册信息有误&#39;);
              // console.log(error);
            });

          }
        }
    }
  }
</script>

index.js 글로벌 가드

router.beforeEach((to,form,next) =>{
      //如果进入到的路由是登录页或者注册页面,则正常展示
      if (to.path === '/login') {
          next();
        } else {
          let token = window.sessionStorage.getItem('token');
          // console.log(token)
          if (token === null || token === '') {
            next('/login');
            // alert("还没有登录,请先登录!");
          } else {
            next();
          }
        }
      // console.log(to)
  })

[관련 권장사항: "

vue.js tutorial

"]

위 내용은 vue는 ajax를 지원하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
分享两个可以绘制 Flowable 流程图的Vue前端库分享两个可以绘制 Flowable 流程图的Vue前端库Sep 07, 2022 pm 07:59 PM

前端有没有现成的库,可以直接用来绘制 Flowable 流程图的?下面本篇文章就跟小伙伴们介绍一下这两个可以绘制 Flowable 流程图的前端库。

vue是前端css框架吗vue是前端css框架吗Aug 26, 2022 pm 07:37 PM

vue不是前端css框架,而是前端JavaScript框架。Vue是一套用于构建用户界面的渐进式JS框架,是基于MVVM设计模式的前端框架,且专注于View层。Vue.js的优点:1、体积小;2、基于虚拟DOM,有更高的运行效率;3、双向数据绑定,让开发者不用再去操作DOM对象,把更多的精力投入到业务逻辑上;4、生态丰富、学习成本低。

聊聊Vue3+qrcodejs如何生成二维码并添加文字描述聊聊Vue3+qrcodejs如何生成二维码并添加文字描述Aug 02, 2022 pm 09:19 PM

Vue3如何更好地使用qrcodejs生成二维码并添加文字描述?下面本篇文章给大家介绍一下Vue3+qrcodejs生成二维码并添加文字描述,希望对大家有所帮助。

手把手带你利用vue3.x绘制流程图手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

利用vue3.x怎么绘制流程图?下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法,希望对大家有所帮助!

一文深入详解Vue路由:vue-router一文深入详解Vue路由:vue-routerSep 01, 2022 pm 07:43 PM

本篇文章带大家详解Vue全家桶中的Vue-Router,了解一下路由的相关知识,希望对大家有所帮助!

手把手带你使用Vue开发一个五子棋小游戏!手把手带你使用Vue开发一个五子棋小游戏!Jun 22, 2022 pm 03:44 PM

本篇文章带大家利用Vue基础语法来写一个五子棋小游戏,希望对大家有所帮助!

手把手带你了解VUE响应式原理手把手带你了解VUE响应式原理Aug 26, 2022 pm 08:41 PM

本篇文章我们来了解 Vue2.X 响应式原理,然后我们来实现一个 vue 响应式原理(写的内容简单)实现步骤和注释写的很清晰,大家有兴趣可以耐心观看,希望对大家有所帮助!

通过9个Vue3 组件库,看看聊前端的流行趋势!通过9个Vue3 组件库,看看聊前端的流行趋势!May 07, 2022 am 11:31 AM

本篇文章给大家分享9个开源的 Vue3 组件库,通过它们聊聊发现的前端的流行趋势,希望对大家有所帮助!

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!