概述
这个Vue搞得挺不错,简单粗暴还有效,上手也不难,记录一下今天的学习,首先描述一下效果:
- 使用PHP从数据库中查询读出来一个表的数据,并以JSON格式提供访问
- HTML页面中使用JQuery的$.getJSON()方法加载JSON数据
- JSON数据加载完毕后实例化Vue对象并将数据渲染到HTML页面中
PHP读数据库返回JSON的过程就不细说了,直接来看HTML代码吧
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>JSON取数测试</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="main">
<table border=1>
<tr>
<td>id</td>
<td>name</td>
<td>type</td>
<td>location</td>
</tr>
<tr v-for="r in rows">
<td>{{r.id}}</td>
<td>{{r.name}}</td>
<td>{{r.type}}</td>
<td>{{r.location}}</td>
</tr>
</table>
</div>
</body>
<script>
$(document).ready(function () {
$.getJSON("http://192.168.8.8", function (result, status) {
var v = new Vue({
el: '#main',
data: {
rows: result
}
})
});
});
</script>
</html>这里补充说明一下,PHP返回的JSON数据是直接用的php内置函数json_encode($一个array类型变量,JSON_UNESCAPED_UNICODE);来实现的,后面跟的参数JSON_UNESCAPED_UNICODE是标注编码时不要用Unicode,要不然编码出来的JSON字符串里面所有中文就都会变成/xxxxx这种格式的了.最终PHP输出的JSON字符串格式如下:
[{"id":1,"name":"张三","type":"工业","location":"市局"},{"id":2,"name":"李四","type":"工业","location":"市局"}]最后
以上就是难过服饰为你收集整理的Vue入门学习-使用服务器传来的JSON数据交给Vue渲染HTML页面的全部内容，希望文章能够帮你解决Vue入门学习-使用服务器传来的JSON数据交给Vue渲染HTML页面所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复