作者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/cn.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