jquery load範例 在 コバにゃんチャンネル Youtube 的最讚貼文
jquery load範例 在 jQuery 顯示facebook 粉絲團照片 的美食出口停車場
同事幫忙找到範例程式，以jQuery 解析json 文檔後，呈現在網頁上，對於jQuery 與facebook API 兩者均生疏，趁此機會一併熟悉。 ... <看更多>
Search
Search
同事幫忙找到範例程式，以jQuery 解析json 文檔後，呈現在網頁上，對於jQuery 與facebook API 兩者均生疏，趁此機會一併熟悉。 ... <看更多>
jquery load範例 在 [問題] 取代jQuery的ajax元件load()的方法- 看板Web_Design 的美食出口停車場
從開始研究網頁設計以來一直都是用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://www.ptt.cc/bbs/Web_Design/M.1509274876.A.EAF.html
※ 編輯: chenjoe (175.181.97.146), 10/29/2017 23:35:09
可是axios好像沒辦法同步?
※ 編輯: chenjoe (175.181.97.146), 10/30/2017 07:19:18
... <看更多>