Vue--axios：vue中的ajax非同步請求（傳送和請求資料）、vue-resource非同步請求和跨域
跨域原理:
一.使用axios傳送get請求
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8<script src="../vue2.4.4.js"></script> 9 <script src="../axios.js"></script> 10 11 </head> 12 13 <body> 14 <!-- 定義一個vue的管理區塊，（MVVM中的View） --> 15 <div id="app"> 16 <button @click="getApiData">點選得到資料</button> 17 {{name}} 18 </div> 1920 </body> 21 22 <script> 23 24 // 例項化vue物件（MVVM中的View Model） 25 new Vue({ 26 // vm控制的區塊為id為app的div，此div中的所有vue指令均可以被vm解析 27 el:'#app', 28 data:{ 29 // 資料 （MVVM中的Model） 30 name:"" 31 }, 32 methods:{ 33 getApiData:function() { 34 //設定請求路徑 35 var url = "http://157.122.54.189:9093/api/getprodlist"; 36 // 傳送請求:將資料返回到一個回到函式中 37 _this= this; 38 // 並且響應成功以後會執行then方法中的回撥函式 39 axios.get(url).then(function(result) { 40 // result是所有的返回回來的資料 41 // 包括了響應報文行 42 // 響應報文頭 43 // 響應報文體 44 console.log(result.data.message[0]); 45 _this.name = result.data.message[0].name; 46 }); 47 } 48 } 49 }) 50 </script> 51 </html>
二.使用axios傳送post請求
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="../vue2.4.4.js"></script> 9 <script src="../axios.js"></script> 10 11 </head> 12 13 <body> 14 <!-- 定義一個vue的管理區塊，（MVVM中的View） --> 15 <div id="app"> 16 <button @click="postApiData">點選提交資料</button> 17 </div> 18 19 </body> 20 21 <script> 22 23 // 例項化vue物件（MVVM中的View Model） 24 new Vue({ 25 // vm控制的區塊為id為app的div，此div中的所有vue指令均可以被vm解析 26 el:'#app', 27 data:{ 28 // 資料 （MVVM中的Model） 29 }, 30 methods:{ 31 postApiData:function() { 32 var url = "http://157.122.54.189:9093/api/addproduct"; 33 // post有兩個引數 34 //引數1:請求的路徑 35 //引數2:提交的引數 36 //提交引數的兩種形態: 37 // 1.可以直接傳入字串 name=張三&age=19 38 // 2.可以以物件的形式傳入{name:"三",age:19} 39 axios.post(url,{name:"拖油瓶前來報道"}).then(function(res) { 40 var resData = res.data; 41 if(resData.status == "0") { //0表示成功，1表示失敗 42 alert(resData.message); 43 }else{ 44 alert(resData.message); 45 } 46 }); 47 48 } 49 } 50 }) 51 </script> 52 </html>
三.使用axios傳送post或get請求細節處理
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="../vue2.4.4.js"></script> 9 <script src="../axios.js"></script> 10 11 </head> 12 13 <body> 14 <!-- 定義一個vue的管理區塊，（MVVM中的View） --> 15 <div id="app"> 16 <button @click="getApiData">點選得到資料</button> 17 <button @click="postApiData">點選提交資料</button> 18 {{name}} 19 20 </div> 21 22 </body> 23 24 <script> 25 //細節處理一：可以給axios的ajax請求設定統一的主機和埠號 26 axios.defaults.baseURL = "http://157.122.54.189:9093/"; 27 //細節處理二: 可以將axios這個物件新增到Vue的原型物件中，將來在使用的時候就只需要使用this.物件名就可以了 28 Vue.prototype.$http = axios; 29 30 31 // 例項化vue物件（MVVM中的View Model） 32 new Vue({ 33 // vm控制的區塊為id為app的div，此div中的所有vue指令均可以被vm解析 34 el:'#app', 35 data:{ 36 // 資料 （MVVM中的Model） 37 name:"" 38 }, 39 methods:{ 40 getApiData:function() { 41 //設定請求路徑 42 var url = "api/getprodlist"; 43 // 傳送請求:將資料返回到一個回到函式中 44 _this= this; 45 // 並且響應成功以後會執行then方法中的回撥函式 46 this.$http.get(url).then(function(result) { 47 // result是所有的返回回來的資料 48 // 包括了響應報文行 49 // 響應報文頭 50 // 響應報文體 51 _this.name = result.data.message[0].name; 52 }).catch(function(){ 53 alert("出錯了"); 54 }); 55 }, 56 57 postApiData:function() { 58 var url = "api/addproduct"; 59 // post有兩個引數 60 //引數1:請求的路徑 61 //引數2:提交的引數 62 //提交引數的兩種形態: 63 // 1.可以直接傳入字串 name=張三&age=19 64 // 2.可以以物件的形式傳入{name:"三",age:19} 65 this.$http.post(url,{name:"拖油瓶前來報道3 "}).then(function(res) { 66 var resData = res.data; 67 if(resData.status == "0") { //0表示成功，1表示失敗 68 alert(resData.message); 69 }else{ 70 alert(resData.message); 71 } 72 }).catch(function(){ 73 alert("出錯了"); 74 }); ; 75 76 } 77 } 78 }) 79 </script> 80 </html>
四.使用axios完成品牌管理
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 #app { 11 width: 600px; 12 margin: 10px auto; 13 } 14 15 .tb { 16 border-collapse: collapse; 17 width: 100%; 18 } 19 20 .tb th { 21 background-color: #0094ff; 22 color: white; 23 } 24 25 .tb td, 26 .tb th { 27 padding: 5px; 28 border: 1px solid black; 29 text-align: center; 30 } 31 32 .add { 33 padding: 5px; 34 border: 1px solid black; 35 margin-bottom: 10px; 36 } 37 </style> 38 <script src="../vue2.4.4.js"></script> 39 <script src="../axios.js"></script> 40 </head> 41 42 <body> 43 <div id="app"> 44 <div class="add"> 45 品牌名稱: <input v-model="name" type="text"> 46 <button @click="add">新增</button> 47 </div> 48 <div class="add">品牌名稱：<input type="text"></div> 49 <div> 50 <table class="tb"> 51 <tr> 52 <th>編號</th> 53 <th>品牌名稱</th> 54 <th>創立時間</th> 55 <th>操作</th> 56 </tr> 57 <tr v-if="list.length <= 0"> 58 <td colspan="4">沒有品牌資料</td> 59 </tr> 60 <!--加入: key="index" 時候必須把所有引數寫完整 --> 61 <tr v-for="(item,key,index) in list" :key="index"> 62 <td>{{item.id}}</td> 63 <td>{{item.name}}</td> 64 <td>{{item.ctime}}</td> 65 <td><a href="#" @click="del(item.id)">刪除</a></td> 66 </tr> 67 </table> 68 </div> 69 70 </div> 71 </body> 72 73 </html> 74 75 <script> 76 // 1 將所有的主機名和埠 一起設定 77 axios.defaults.baseURL = "http://157.122.54.189:9093"; 78 // 2 將axios新增到Vue的原型物件中 79 Vue.prototype.$http = axios; 80 81 var vm = new Vue({ 82 el: "#app", 83 data: { 84 name: '', 85 list: [] // 資料應該來源於伺服器提供的api 86 }, 87 mounted:function() { //鉤子函式 88 this.getList(); 89 }, 90 methods: { 91 // 得到所有的列表資料,這個方法應該等頁面載入完成以後直接被呼叫的 92 getList:function() { 93 var url = "/api/getprodlist"; 94 // 改變this的指向 95 _this = this; 96 this.$http.get(url).then(function(result){ 97 var res = result.data; 98 if(res.status == 0) { 99 //將資料賦值給list 100 _this.list = res.message; 101 }else{ 102 alert("出錯了"); 103 } 104 }).catch(function(){ 105 alert("出錯了"); 106 }); 107 }, 108 // 得到文字框中的值，並且將值通過api提交到伺服器 109 add:function() { 110 var url = "/api/addproduct"; 111 _this = this; 112 // 得到name屬性對應的值 113 this.$http.post(url,{"name":this.name}).then(function(result){ 114 var res = result.data; 115 if(res.status == "0") { 116 alert(res.message); 117 _this.getList(); 118 }else{ 119 alert(res.message); 120 } 121 }).catch(function() { 122 alert("出錯了"); 123 }); 124 }, 125 del:function(id){ 126 //格局id刪除資料 127 var url = "/api/delproduct/"+id; 128 // 傳送非同步請求 129 _this = this; 130 this.$http.get(url).then(function(result){ 131 var res = result.data; 132 if(res.status == "0") { 133 alert(res.message); 134 //更新資料 135 _this.getList(); 136 }else{ 137 alert(res.message); 138 } 139 140 }).catch(function(){ 141 alert("出錯了"); 142 }); 143 } 144 } 145 }); 146 147 </script>
五.使用vue-resource傳送非同步請求(包含get和post請求)
兩個js檔案一定要按照順序載入
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="../vue2.4.4.js"></script> 9 <script src="../vue-resource.js"></script> 10 11 </head> 12 13 <body> 14 <!-- 定義一個vue的管理區塊，（MVVM中的View） --> 15 <div id="app"> 16 {{name}} 17 </div> 18 19 </body> 20 21 <script> 22 23 // 例項化vue物件（MVVM中的View Model） 24 new Vue({ 25 // vm控制的區塊為id為app的div，此div中的所有vue指令均可以被vm解析 26 el:'#app', 27 data:{ 28 // 資料 （MVVM中的Model） 29 name:"" 30 }, 31 methods:{ 32 33 }, 34 created:function() { 35 // 傳送請求到伺服器載入資料 36 //vue-resource傳送get請求 37 /* this.$http.get("http://157.122.54.189:9093/api/getprodlist").then(function(result){ 38 //得到響應的內容 39 var res = result.body; 40 this.name = res.message[0].name; 41 }); 42 */ 43 //vue-resource傳送post請求 44 this.$http.post("http://157.122.54.189:9093/api/addproduct",{"name":"小明"}).then(function(result){ 45 var res = result.body; 46 alert(res.message); 47 }); 48 } 49 }) 50 </script> 51 </html>
六.使用vue-resource來實現跨域
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 9 <script src="../vue2.4.4.js"></script> 10 <script src="../vue-resource.js"></script> 11 </head> 12 13 <body> 14 <!-- 定義一個vue的管理區塊，（MVVM中的View） --> 15 <div id="app"> 16 17 </div> 18 19 </body> 20 21 <script> 22 23 // 例項化vue物件（MVVM中的View Model） 24 new Vue({ 25 // vm控制的區塊為id為app的div，此div中的所有vue指令均可以被vm解析 26 el:'#app', 27 data:{ 28 // 資料 （MVVM中的Model） 29 },相關推薦
Vue--axios：vue中的ajax非同步請求（傳送和請求資料）、vue-resource非同步請求和跨域
跨域原理:一.使用axios傳送get請求 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="
openstack：nova中“從映象啟動（建立一個新卷）”建立虛擬機器的流程
原文網址:http://blog.csdn.net/xiangpingli/article/details/47912777 nova還有一種啟動方式：“從映象啟動（建立一個新卷）” 這個流程中，nova會在_prep_block_device中的attach_blo
Vue--axios：vue中的ajax異步請求（發送和請求數據）
lan his src 操作 ajax請求 itl func gin 出錯 一.使用axios發送get請求 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <me
vue+axios+element-ui 實現ajax請求攔截和路由攔截
原文連結 https://www.cnblogs.com/parkboyoung/p/6761863.html ajax攔截器： 結合element-ui中loading和message元件來處理的，我們可以單獨建立一個http的js檔案處理axios，再到main.js中引入，統一處理
vue使用axios傳送post請求（data為json格式）
安裝axios cnpm install axios 在main.js中新增axios，此處注意axios外掛不同於其他，引用不能使用Vue.use();而是使用Vue.prototype.$axios = axios; import axios from '
vue單頁應用中，使用setInterval()定時向伺服器獲取資料，後來跳轉頁面後，發現還在不停的獲取資料。
使用VUE開發單頁專案時遇到這樣的問題，mounted中使用setInterval()定時向伺服器獲取資料，後來跳轉頁面後，發現還在不停的獲取資料。我以為是因為我路由用的push導致的，改成replace也是這樣，後來就在部落格園找到答案了，如下： http://www.cnblogs.com/zzbp/p/
vue中的tab切換（v-show,v-if）
今天在用vue寫tab切換的時候遇到了一個小坑，就是：不同的選項對應的列表的渲染我用的是v-show進行判斷，結果發現雖然選項列表切換成功了但是列表的渲染樣式卻出現了異常，經過查閱資料我發現問題就出在了v-show上面。 v-show不管元素是否符合判斷條件都會一直存在Do
Abp Zero AJAX請求（文件上傳）出現400 bad request 錯誤問題解決
class clas pic php http security str pro tps 使用abp框架，使用了Zero模塊。再使用Element ui進行上傳圖片。出現400 bad request錯誤請求。 用postman傳數據到接口時正常工作的。 經過幾經波折，
使用原生JS發送AJAX請求（XML，JSON解析）
status quest chan ldoc text nbsp 字符 tco send mybutton.addEventListener(‘click‘, (e) => { let request = new XMLHttpRequest() r
python學習之【第十七篇】：Python中的面向物件（一）
1.什麼是類和類的物件？ 類是一種資料結構，我們可以用它來定義物件，後者把資料值和行為特性融合在一起，類是現實世界的抽象的實體以程式設計形式出現。例項是這些物件的具體化。類是用來描述一類事物，類的物件指的是這一類事物的一個個體。例如：“人”就是一個類，而男人，女人，小孩等就是“人”這個類的例項物件；再比如“
使用vue+element實現表格的新增、編輯（含下拉框）、刪除功能（Vue開發二）
幾天前，需要做一個需求：新增一個xml檔案時，新增數量不確定、屬性相同的xml標籤，想了想可以用表格做啊，屬性相同，使用統一的表頭，下面的屬性值只是進行增刪改不就行了，就類似於mysql給表裡填資料一樣。 可是目前似乎還沒有表格的直接增刪改一行的操作，那要怎麼實現呢？於是，通過上網以及自己的思考
vue學習（一）、Vue.js簡介
Vue.js 五天 湯小洋一、 Vue.js簡介1. Vue.js是什麼Vue.js也稱為Vue，讀音/vju:/，類似view，錯誤讀音v-u-e 版本：v1.0 v2.0是一個構建使用者介面的框架是一個輕量級MVVM（Model-View-ViewModel）框架，和angular、react類似，其實就
從 ie10瀏覽器下Symbol 未定義的問題 探索vue專案如何相容ie低版本瀏覽器（ie9, ie10, ie 11 ）
問題： vue專案在ie11下一片空白並報Symbol 未定義的錯 原因： ie10瀏覽器解析不了es6的語法，需要我們使用babel（Babel是一種工具鏈，主要用於將ECMAScript 2015+程式碼轉換為當前和舊版瀏覽器或
vue腳手架，微信公眾號授權（微信網頁授權）
如果使用者在微信客戶端中訪問第三方網頁，公眾號可以通過微信網頁授權機制，來獲取使用者基本資訊，進而實現業務邏輯。 首先我做了一個H5小專案，然後申請公眾號，然後在【自定義選單】中輸入想填寫的，公眾號選單名稱，以及頁面地址： 然後，我們在我們的前端頁面寫呼叫伺服器介面，得到授權。當然
vue+ElementUI+高德API地址模糊搜尋（自定義UI元件）
開發環境描述： Vue.js ElementUI 高德地圖API 需求描述： 在新增地址資訊的時候，我們需要根據input輸入的關鍵字呼叫地圖的輸入提示API，獲取到返回的資料，並根據這些資料生成下拉列表，選擇某一個即獲取當前的地址相關資訊（包括位置名稱、經緯度、街區、城市、id等資
劍指offer面試題三 ：陣列中重複的數字（ google 面試）
目錄 參考部落格： 題目一：找出陣列中重複的數字 思路一 思路二 題目二：不修改陣列找出重複的數字 測試： 牛客： 牛客高贊（和思路二類似都是hash對映，網友思路真是腦洞大開，這裡相關溢位問題考慮的只有~(1<<31)>>1，
spring mvc中ajax的呼叫（在上一篇的基本上）
spring mvc中ajax的呼叫 目錄 三、測試 一、在網格根目錄下建 resources\css resources\css\css.css @CHARSET "UTF-8"; .cssTable{ border:1px blue solid;
java入門練習題（三）：讀入一組整數（不超過20個），當用戶輸入0時，表示輸入結束；然後程式將從這組整數中，把第二大的整數找出來，並把它打印出來。
程式意義：讀入一組整數（不超過20個），當用戶輸入0時，表示輸入結束；然後程式將從這組整數中，把第二大的整數找出來，並把它打印出來。 說明：（1）0表示輸入結束，它本身並不計入這組整數中。 （2）在這組整數中，既有整數又有負數；
AndroidStudio中使用Git-高階篇（二）——新建分支和拉取請求（by 星空武哥）
前段時間寫過一篇文章介紹如何在AndroidStudio使用上傳專案到github，今天接著給大家帶來了他的高階篇——新建分支（branch）和拉取請求（Pull request）。 在真正的開發中我們很少寫完程式碼commit後直接push程式碼上去，因為這樣做
扒一拔：Java 中的泛型（一）
目錄 1 泛型 1.1 為什麼需要泛型 1.2 型別引數命名規約 2 泛型的簡單實用 2.1 最基本最常用 2.2 簡單泛型類 2.2.1 非泛型類 2.2.2 泛型類的定義 2.2.3 泛型類的使用