vue最初使用vue-resource來實作異步請求（ajax），vue 2.0開始推薦使用 axios 來代替vue-resource，
準備作業
1、使用npm下載axios
npm install axios
2、引入axios.js
<script src="js/axios.js"></script>
上線時換為min.js
前端 vue使用axios發起異步請求
可以這樣寫：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 引入vue.js --> <script src="js/vue.js"></script> <!-- 引入axios.js --> <script src="js/axios.js"></script> </head> <body> <div id="app"></div> <script> new Vue({ el:'#app', template:` <div> <button @click="login">發送</button> </div> `, data(){ return{ } }, methods:{ login:function() { axios.post('/login', { //get|post可選，用物件{ }傳遞資料，如果不傳遞資料，可預設{ }，get方式引數也可以拼接在url中 username: 'chy', //通常是獲取表單資料，$('#xxx').val password: 'abcd' }).then(function (response) { //處理后臺回傳的資料， console.log(response); //response是后臺回傳的整個回應 console.log(response.data); //.data才是后臺回傳的資料 }).catch(function (error) { //發生錯誤時的處理 console.log(error); }); } } }) </script> </body> </html>
如果不需要后臺回傳資料，可以不要then，catch也不是必需的，
也可以這樣寫：
methods:{ login:function() { axios({ method:'post', //請求方式 url:'/login', //后臺介面 data:{ //傳給后臺的資料 username: 'chy', password: 'abcde' } }).then(function (response) { console.log(response); //response是后臺回傳的整個回應 console.log(response.data); //.data才是后臺回傳的資料 }).catch(function (error) { //發生錯誤時的處理 console.log(error); }); } }
這種是不跨域的，如果跨域，url要寫 host|ip:port/xxx，寫全，
發起異步請求時可以用resultType指定期待回傳的資料型別（text、json、stream），可以但是沒必要，會自動識別回傳的資料型別，
后臺 處理ajax請求
@Controller // @ResponseBody //@ResponseBody可以寫在類上、方法上，寫在類上時，對類中所有方法都生效 // @RestController //@RestController相當于@Controller+@ResponseBody public class UserController { @RequestMapping("/login") @ResponseBody //如果要回傳資料給前端，需要用@ResponseBody修飾方法，以json形式回傳，不然會被當做視圖名 public String login(@RequestBody Map<String,String> map) { //如果要接收ajax傳來的引數，需要用一個、且只能用一個Map來接收引數，并且要用@RequestBody標注 String username = map.get("username"); //獲取ajax傳遞的引數 String password = map.get("password"); System.out.println(username); System.out.println(password); return "ok"; //回傳給前端的資料，如果不回傳資料，回傳值型別設定為void即可 } }
上面的demo不涉及跨域請求，如果請求要跨域，前端、后臺都要做一些其它設定，
后臺 回傳資料示例
@RestController //相當于@Controller+@ResponseBody public class UserController { //回傳文本|字串 @RequestMapping("/login1") public String login1() { return "hello"; } //回傳物件 @RequestMapping("/login2") public User login2() { User user = new User("chy", "abcd"); return user; } //回傳Map，Map和pojo類都是一回事，都是作為json物件回傳 @RequestMapping("/login3") public Map<String,Object> login3() { HashMap<String, Object> map = new HashMap<>(); map.put("username", "chy"); map.put("age", 20); return map; } //回傳List，以json陣列的形式回傳 @RequestMapping("/login4") public List login4() { User user1 = new User("chy1", "abcd"); User user2 = new User("chy2", "abcd"); User user3 = new User("chy3", "abcd"); ArrayList<User> userList = new ArrayList<>(); userList.add(user1); userList.add(user2); userList.add(user3); return userList; } }
前端 取出資料示例
.then(function (response) { console.log(response.data); //取出回傳的資料，字串|物件|Map|List // console.log(response.data.username); //取出物件|Map的某個欄位的值 // console.log(response.data[0]); //取出List中的某個元素 // console.log(response.data[0].username); //取出List中的某個元素的某個欄位的值 })
說明
如果除錯時，Chrome控制臺報錯： net::ERR_SOCKET_NOT_CONNECTED ，多重繪幾次，或者清除快取即可，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/127973.html
標籤：JavaScript