方法：1、安裝並引入axios，以「axios([option])」、「axios.get(url[,...])」等方法發送請求。 2.安裝並引入vue-resource，以「this.$http.jsonp(url,[...])」發送請求。
本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。
vue本身不支援發送AJAX請求，需要使用vue-resource、axios等外掛程式實作。
axios是基於Promise的HTTP請求客戶端，用來發送請求，也是vue2.0官方推薦的，同時不再對vue-resource進行更新和維護。
vuejs使用ajax的方法
#1、安裝axios並引入
1）npm的方式： npm install axios -S
2）bower的方式： bower install axios
3）cdn的方式：<script src="%E2%80%9Dhttps://unpkg." com></script>
2、基本用法
1）axios([options ])
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>axios发送ajax请求基本用法</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<button @click="send">发送ajax请求</button>
</div>
<script>
new Vue({
el:"#app",
methods:{
send(){
axios({
method:'get',
url:'user.json'
}).then(function(res){
console.log(res.data.name);
});
}
}
});
</script>
</body>
</html>
2)axios.get(url[,options]);
傳參方式：
（1）透過url傳參axios('url?key=value&key1=val2').then();
(2) 透過params選項傳參axios('url',{params:{key:value}}).then();
3）axios.post(url,data,[options]);
axios預設傳送資料時，資料格式是Request Payload，並且非常用的Form Data格式，
所以參數必須以鍵值對形式傳遞，不能以json形式傳。
傳參方式：
（1）自己拼接為鍵值對
axios.post(‘url’,’key=value&key1=value1’).then();
（2）使用transformRequest，在請求發送前將請求資料進行轉換
axios.post('url',data,{
transformRequest:[
function(data){
let params = '';
for(let index in data){
params +=index+'='+data[index]+'&';
}
return params;
}
]
}).then(function(res){
console.log(res.data)
});（3）如果使用模組化開發，可以使用qs模組進行轉換
axios本身並不支援發送跨域的請求，沒有提供對應的API，作者也暫沒計劃在axios添加支援發送跨域請求，
所以只能使用第三方庫
跨域請求（使用vue- resource發送跨域請求）
1、使用vue-resource發送跨域請求步驟
- 安裝vue-resource並引入：npm install vue-resource -S
- 基本用法：
使用this.$http.jsonp(url,[ops]) 發送請求
#2、基本使用演示（vuejs怎麼用ajax）
1）打開vuejs怎麼用ajax，然後輸入字符'a'會有一些搜索選項自動提示，如圖
2）複製連結
https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=a
3）代碼示範
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用vue-resource发送跨域请求</title>
<!--引入vue、vue-resource文件-->
<script src="vue.min.js"></script>
<script src="vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<button @click="sendJsonp">send</button>
</div>
<script>
var vm = new Vue({
el:"#app",
methods:{
sendJsonp:function(){
this.$http.jsonp('https://sug.so.360.cn/suggest',{
params:{
word:'a'
}
}).then(function(res){
console.log(res.data);
});
}
}
});
</script>
</body>
</html>4）結果
#3、基本範例示範（百度搜尋）
1）要求同360搜尋的要求
2）複製連結
=1526436420943」>https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/suwd=a&json 1&p=3&sid=1467_21117_20927&req=2&csor=1&cb=jQuery1102060305102784707_1526436420940&=1526436420943 #1201126436420943264364209320940&=1526436420943）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用vue-resource发送跨域请求</title>
<!--引入vue、vue-resource文件-->
<script src="vue.min.js"></script>
<script src="vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<button @click="sendJsonp">send</button>
</div>
<script>
var vm = new Vue({
el:"#app",
methods:{
sendJsonp:function(){
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
params:{
wd:'a'
}
}).then(function(res){
console.log(res.data);
});
}
}
});
</script>
</body>
</html>結果會報錯
那這是為什麼呢？
修改過後的程式碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用vue-resource发送跨域请求</title>
<!--引入vue、vue-resource文件-->
<script src="vue.min.js"></script>
<script src="vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<button @click="sendJsonp">send</button>
</div>
<script>
var vm = new Vue({
el:"#app",
methods:{
sendJsonp:function(){
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
params:{
wd:'a'
},
jsonp:'cb'
}).then(function(res){
console.log(res.data);
});
}
}
});
</script>
</body>
</html>4）結果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vuejs怎麼用ajax列表</title>
<style>
.current{
background-color:#CCCCCC;
}
</style>
<!--引入vue、vue-resource文件-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.0"></script>
</head>
<body>
<script>
window.onload=function() {
new Vue({
el: "#app",
data: {
keyword: '',
myData:[],
now: -1
},
methods: {
getData(e) {
//如果按方向键上、下，则不发请求
if (e.keyCode == 38 || e.keyCode == 40)
return;
this.$http.jsonp(
'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
params: {
wd: this.keyword
},
jsonp: 'cb'
}).then(function (res) {
console.log(res.data.s);
this.myData = res.data.s;
});
},
changeDown() {
this.now++;
this.keyword = this.myData[this.now];
if (this.now == this.myData.length) {
this.now = -1;
}
},
changeUp() {
this.now--;
this.keyword = this.myData[this.now];
if (this.now == -2) {
this.now = this.myData.length - 1;
}
}
}
});
}
</script>
<div id="app">
<input type="text" v-model="keyword"
@keyup="getData($event)" @keydown.down="changeDown"
@keydown.up.prevent="changeUp"
/>
<ul>
<li v-for="(val,index) in myData" :key="index"
:class="{current:index==now}"
>
{{val}}
</li>
</ul>
</div>
</body>
</html>相關推薦：《
以上是vuejs怎麼用ajax的詳細內容。更多資訊請關注PHP中文網其他相關文章！
VUE3基础教程：使用Vue.js插件封装图片上传组件Jun 15, 2023 pm 11:07 PMVUE3基础教程：使用Vue.js插件封装图片上传组件Vue.js是一款流行的前端框架，它使开发者可以用更少的代码创建更高效、灵活的应用程序。尤其是在Vue.js3发布之后，它的优化和改进使得更多的开发者倾向于使用它。这篇文章将介绍如何使用Vue.js3来封装一个图片上传组件插件。在开始之前，需要先确保已经安装了Vue.js和VueCLI。如果尚未安装
VUE3快速入门：使用Vue.js指令实现选项卡切换Jun 15, 2023 pm 11:45 PM本文旨在帮助初学者快速入手Vue.js3，实现简单的选项卡切换效果。Vue.js是一个流行的JavaScript框架，可用于构建可重用的组件、轻松管理应用程序的状态和处理用户界面的交互操作。Vue.js3是该框架的最新版本，相较于之前的版本变动较大，但基本原理并未改变。在本文中，我们将使用Vue.js指令实现选项卡切换效果，目的是让读者熟悉Vue.js的
Flask + Vue.js：快速实现单页面应用Jun 17, 2023 am 09:06 AM随着移动互联网和Web技术的迅速发展，越来越多的应用需要提供流畅、快速的用户体验。传统的多页面应用已经无法满足这些需求，而单页面应用（SPA）则成为了解决方案之一。那么，如何快速实现单页面应用呢？本文将介绍如何利用Flask和Vue.js来构建SPA。Flask是一个使用Python语言编写的轻量级Web应用框架，它的优点是灵活、易扩
VUE3基础教程：使用Vue.js插件封装日历组件Jun 15, 2023 pm 09:09 PMVue.js是现代化的前端JavaScript框架之一，它提供了一套完整的工具来构建交互式用户界面。在Vue.js的生态系统中，有各种各样的插件和组件，可以大大简化我们的开发流程。在本篇文章中，我们将介绍如何使用Vue.js插件封装一个日历组件，以方便我们在Vue.js项目中快速使用。Vue.js插件Vue.js插件可以扩展Vue.js的功能。它们可以添加全
Vue.js实现登录验证的完整指南（API、JWT、axios）Jun 09, 2023 pm 04:04 PMVue.js是一种流行的JavaScript框架，用于构建动态Web应用程序。实现用户登录验证是开发Web应用程序的必要部分之一。本文将介绍使用Vue.js、API、JWT和axios实现登录验证的完整指南。创建Vue.js应用程序首先，我们需要创建一个新的Vue.js应用程序。我们可以使用VueCLI或手动创建一个Vue.js应用程序。安装axiosax
VUE3开发入门教程：使用Vue.js组件封装chart图表Jun 15, 2023 pm 10:29 PM随着大数据时代的到来，数据可视化已经成为了现如今的趋势之一。在Web前端开发的过程中，如何使用Vue.js进行数据可视化处理，成为了许多前端开发者所关注的问题。本文将会介绍如何使用Vue.js组件，封装基于chart.js库的图表。1.了解chart.jsChart.js是一款基于HTML5CanvasElement的简单易用、跨平台的开源图表库，我们可
VUE3开发入门：使用Vue.js动态过滤数据列表Jun 15, 2023 pm 09:10 PMVue.js已经成为现代Web开发的中流砥柱。它是一个轻量级的JavaScript框架，提供了数据绑定和组件化的能力，使得开发者能够更加轻松地构建交互型应用程序。而现在，Vue.js的新版本VUE3也已经面世。在本文中，我们将使用VUE3，通过实例，介绍如何在Vue.js中实现动态过滤数据列表。1.准备工作在开始本教程之前，您需要先安装Node.js和Vue
VUE3基础教程：使用Vue.js自定义事件Jun 15, 2023 pm 09:43 PMVue.js是一款流行的JavaScript框架，它提供了很多方便的特性，所以它在开发Web应用程序时非常有用。Vue.js中的自定义事件系统使其更加灵活，并且可以通过组件事件触发和处理来实现更好的代码重用性。在本文中，我们将讨论如何使用Vue.js的自定义事件。Vue.js中自定义事件的基础在Vue.js中，我们可以通过v-on指令来监听DOM事件。例如，
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
