您的位置：首页 > 产品设计 > UI/UE

Vue入门学习-使用服务器传来的JSON数据交给Vue渲染HTML页面

2017-09-07 23:56 1006 查看

这个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":"市局"}]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航