Vue.js之Ajax請求


Vue.js同React、Angular,可以說號稱前端三巨頭。

前段時間,有個哥們說,Vue.js現在出2.0版本了。可是我現在還是在用1.0的。

Vue.js一直都沒有好好系統的學習,包括目前公司雖然是在用Vue,但是讓我感覺用的有些偏了。比如Vue.js明明就有異步交互,但是我用的卻還是jQuery的ajax,說到這也不是歧視jQuery,只不過覺得沒有用到刀刃上。總覺得怪怪的。

今天貼一段代碼,關於Vue.js的Ajax請求,希望能給朋友們帶來幫助。

下面代碼,測試完全沒問題,只不過url需要改成你個人項目或公司項目對應的那個。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="box">
    <input type="button" @click="get()" value="點我異步獲取數據(Get)">
</div>
<script type = "text/javascript">
window.onload = function(){
var vm = new Vue({
    el:'#box',
    data:{
        msg:'Hello World!',
    },
    methods:{
        get:function(){
            //發送get請求
            this.$http.get('localhost:8080/test-web/database/getAllDataBaseInfo').then(function(res){
                document.write(res.body);    
            },function(){
                console.log('請求失敗處理');
            });
        }
    }
});
}
</script>
</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM