作者chenjoe (MAKOTO)
看板Web_Design
標題[問題] 取代jQuery的ajax元件load()的方法
時間Sun Oct 29 19:01:11 2017
從開始研究網頁設計以來一直都是用jQuery來處理JS的問題
只是一直有呼聲說jQuery已經落伍該被淘汰了,於是最近開始研究Vue.js框架
Vue.js的設計理念跟jQuery差很大,但只要習慣了就會發現很方便
只是在ajax的部分到目前為止我還是覺得jQuery還是最好用的
例如下面的例子,這是一個利用jQuery製作的導覽列---
[index.html]
...
<div>
<nav>
<li>
<div>JS應用範例</div>
<ul>
<li><a id="Calculator">計算機</a></li>
</ul>
<div>jQuery練習</div>
<ul>
<li><a id="JSON">JSON資料處理</a></li>
</ul>
<div>PHP整合應用</div>
<ul>
<li><a id="SingUp">註冊</a></li>
<li><a id="Login">登入</a></li>
<li><a id="reCAPTCHA">Google驗證</a></li>
<li><a id="get_client_ip">取得客戶端IP</a></li>
</ul>
</li>
</nav>
<div id="content">
</div>
</div>
<script>
$(function () {
// alert("ready event!");
$("li > a").click(function(e){
var url;
switch(e.target.id){
case "Calculator":
url = "./_page/calculator.html";
break;
case "JSON":
url = "./_page/json.html";
break;
case "SingUp":
url = "./_page/singup.html";
break;
case "Login":
url = "./_page/login.html";
break;
case "reCAPTCHA":
url = "./_page/captcha.html";
break;
case "get_client_ip":
url = "./_page/get_client_ip.html";
break;
}
//使用load方法將取得的頁面資料渲染到div上
$("#content").load(url);
}); //End click
}); //End jQuery main
</script>
然後下面我打算用Vue.js的方式去取代---
ajax方面使用Vue.js 2官方推薦的axios插件
[index.html]
<head>
<meta charset="UTF-8">
<script
src="
https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script src="
https://unpkg.com/axios/dist/axios.min.js"></script>
<title>Vue.js練習</title>
</head>
<body>
<div id="main">
<nav @click="navigate">
<li>
<div>JS應用範例</div>
<ul>
<li><a id="Calculator">計算機</a></li>
</ul>
<div>jQuery練習</div>
<ul>
<li><a id="JSON">JSON資料處理</a></li>
</ul>
<div>Vue.js練習</div>
<ul></ul>
<div>PHP整合應用</div>
<ul>
<li id="SingUp">註冊</li>
<li id="Login">登入</li>
<li id="reCAPTCHA">Google驗證</li>
<li id="get_client_ip">取得客戶端IP</li>
</ul>
</li>
</nav>
<div v-html="content">
<!-- 把用ajax撈回來的資料渲染到這裡 -->
</div>
</div>
<script>
var vue = new Vue({
el: '#main',
data: {
content: "請選擇左邊項目"
},
methods: {
navigate: function (e) {
var url,data;
switch (e.target.id) {
case "Calculator":
url = "page1.html";
break;
}
axios.get(url)
.then(function (response) {
data = response.data;
})
.catch(function (error) {
});
//將利用axios插件的get取得的網頁資料指定到content上
this.content = data;
}
}
})
</script>
</body>
</html>
結果撈回來的資料完全沒辦法像用$jQuery.load()方法一樣
連css效果跟JS程式碼一起正常運作,請問有什麼方法可以解決這個問題嗎?
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 175.181.97.146
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1509274876.A.EAF.html
1F：→ pop0030: 你沒考慮到async(非同步)的問題 10/29 21:23
不好意思,我琢磨這句好久一直搞不懂意思,可以麻煩大大講解得具體一點嗎?謝謝
※ 編輯: chenjoe (175.181.97.146), 10/29/2017 23:35:09
3F：→ dannypsnl: 你data還沒有東西就被指定給content了 10/29 23:39
4F：→ dannypsnl: axios拿資料的動作是非同步的 10/29 23:40
所以$jQuery.load()其實是送出一個同步的GET請求到Sever拿網頁丟回給前端?
可是axios好像沒辦法同步?
※ 編輯: chenjoe (175.181.97.146), 10/30/2017 07:19:18
5F：→ pop0030: $jQuery.load()也是非同步的方法 10/30 09:12
6F：→ pop0030: 不過你用的$('#content').load(url)是處理過非同步縮寫 10/30 09:13
7F：→ xdraculax: 直接點就是塞內容那行放 then 裡 10/30 12:01
8F：→ jhnny97: 你用chrome的話開一次開發者工具看network資料怎麼跑 10/30 14:02
9F：→ jhnny97: 你就知道怎麼處理問題了 10/30 14:02
10F：→ AllenGuan: 把then那行改成then(res => this.content = res.data) 11/03 12:08