核心提示：这个Vue搞得挺不错,简单粗暴还有效,上手也不难,记录一下今天的学习,首先描述一下效果:1、使用PHP从数据库中查询读出来一个表的数据,并以JSON格式提供访问2、HTML页面中使用JQuery的$....
这个Vue搞得挺不错,简单粗暴还有效,上手也不难,记录一下今天的学习,首先描述一下效果:
1、使用PHP从数据库中查询读出来一个表的数据,并以JSON格式提供访问
2、HTML页面中使用JQuery的$.getJSON()方法加载JSON数据
3、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>
<p 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>
</p>
</body>
<script>
$(document).ready(function () {
$.getJSON("https://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":"市局"}]
