Ajax接收Json数据,调用template模板循环渲染页面的方法
一、 后台接口吐出JSON数据
后台php接口中,需要写三个部分:
1.1 开头header规定数据格式;
header("content-type:application/json;charset=utf-8");
1.2 查询完数据后编写键值对数组;
$theData1 = selectblabla;
$theData2 = selectblabla;
$dataArray= Array(
"theData1" => $theData1,
"theData2" => $theData2
);
1.3 结尾输出json_encode。
echo json_encode($dataArray);
2 建立Template循环模板
2.1 在HTML中引入Template插件js;
<script src="../assets/vendors/art-template/template-web.js"></script>
2.2 在页面内嵌或外联js中写入template模板;
<script type="text/html" id="模板id">
//循环开头结尾用each包起来,开头标明引入的JSON数据源
//如:案例中数据源为backData中的theData2
{{each theData2}}
<tr> //从JSON中需取的值,用$value把键点出来
<td>{{$value.keyA}}</td>
<td>{{$value.keyB}}</td>
<td>{{$value.keyC}}</td>
</tr>
{{/each}}
</script>
3 Ajax请求数据,调用template渲染内容
3.1 在AJex请求中,sucess函数中,调用template()函数
$.get({
url: '../_api/getDate.php',
success: function(backData){
//直接将tbody中的内容html替换为模板循环渲染的内容
$("tbody").html(template("模板id",backData));
})
注意:注册事件函数
模板渲染出来的页面元素均为动态生成的,如需注册事件函数,不能直接将click等事件注册在元素上。
而是on在页面的静态父级元素,再写注册事件函数。
例如:<tr>及里面的内容是动态生成的,需给<tr>中的<a>注册点击事件
//on在table上,注册click事件,触发元素为table中的a
$("table").on("click", "a" ,function(){
函数体;
})
二、后台接口吐出JSON格式的字符串
1 后台接口吐出JSON格式字符串
echo '{
"theKeyA" : "blablabla",
"theKeyB" : "okeyokey"
//… …
}';
2 建立Template循环模板
<script type="text/html" id="模板id">
//循环开头结尾用each包起来,开头标明引入的JSON数据源
//如:案例中数据源为theData1
{{each theData1}}
<tr> //从JSON中需取的值,用$value把键点出来
<td>{{$value.theKeyA}}</td>
<td>{{$value.theKeyB}}</td>
</tr>
{{/each}}
</script>
3 Ajax请求数据,规定JSON格式,调用template渲染内容
3.1 在AJex请求中,定义sucess函数中,调用template()函数
$.get({
url: '../_api/getDate.php',
dataType:'json',
success: function(backData){
//直接将tbody中的内容html替换为模板循环渲染的内容
$("tbody").html(template("模板id",backData));
})
Ajax接收Json数据,调用template模板循环渲染页面的方法的更多相关文章
- ThinkPHP中使用ajax接收json数据的方法
本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先 ...
- ajax接收json数据到js解析
今天又学到了一点新知识,脑子记不住东西特把它记录下来! 页面ajax请求后台时一般都是返回字符串进行判断,要是返回list或者对象时该怎么办? 第一种:ajax接收到list并返回给前台 js代码: ...
- ajax 接收json数据的进一步了解
var url = "../searchclasses"; $.ajax({ url: url, type: "post", dataType: "j ...
- 微信小程序 带参调用后台接口 循环渲染页面 wx.request wx:for
test.js 文件里的onLoad function getarticles(p,order,mythis) { wx.request({ url: 'https://ganggouo.cn/ind ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
- Jquery的$.ajax、$.get、$.post发送、接收JSON数据及回调函数用法
平时研究代码时,经常会遇到AJAX的相关用法,做项目时才真正体会到Ajax的强大之处(与服务器数据交互如此之便捷,更新DOM节点而不用刷新整个页面),以及运用的频繁程度.今天整理了一下自己之前没搞清楚 ...
- AJAX如何接收JSON数据
简介 在我们了解如何使用AJAX返回JSON数据的时候要先明白下列几点 1. JSON如何来表示对象的 2. JSON如何来表示数组的 var object = { "labId" ...
- ajax接收json
l 什么是json? l Json和xml比较 l Ajax如何使用JSON l Ajax接收json响应案例 什么是json? JSON (JavaScript Object Notation) 是 ...
- Ajax接收json响应
json? Json和xml比较 Ajax如何使用JSON Ajax接收json响应案例 什么是json?JSON (JavaScript Object Notation) 是一种轻量级的 ...
随机推荐
- @Value注解的使用
前提它需要在spring 管理的Bean中有效 (如@Service...) #{...} 此方式可以使用 SpEL 表达式如 #{30-15} ${...} 可以获取配置文件中的值 如 ${jwt. ...
- 使用阿里的EasyExcel遇到的一些坑(NoSuchMethodError异常)
引入eayexcel依赖的时候已经包含了poi依赖
- JS bind()方法、JS原生实现bind()
一.arguments的含义 // arguments 是一个对应于传递给函数的参数的类数组对象 function a(){ console.log(arguments); } a(); // Arg ...
- Http 状态码总结
HTTP 状态码列表 一. 1 开头 (继续执行) 服务器收到请求,需要请求者继续执行操作 100:(continue) 客户端继续请求 101:(Switching Protocols) 切换协议, ...
- 【原】mac电脑使用总结
mac下终端配置(item2+oh-my-zsh)+solarized配色方案:https://www.cnblogs.com/weixuqin/p/7029177.html
- 动态规划-国王的金矿问题java
紧接着上一篇动态规划问题,现在我们开始探讨一个新的问题,问:有一个发现了5个金矿,每一个金矿的储量不同,需要参与挖掘的工人数也不通,参与挖矿工人的总数量是10人,每一座金矿要么全挖,要么不挖,不能派一 ...
- 基于Facebook开源框架SocketRocket的即时通讯
SocketRocket 介绍: SocketRock 是 Facebook 开源的框架,基于 WebSocket 客户端类库,适用于 iOS.Mac OS.tv OS.GitHub 传送门:http ...
- php 微信小程序支付
php 微信小程序支付 直接贴代码: 前端测试按钮wxml: <view class="container"> <text class="name&qu ...
- NSDateFormatter使用注意事项
NSDateFormatter是用来连接NSDate和NSString之间的桥梁 它的使用方式,不(自)做(行)说(百)明(度) 要说的注意事项就是,NSString转NSDate时,NSDateFo ...
- mysql之魔鬼训练营
普通 + 中等 难度练习题 测试数据: --建表 --学生表 CREATE TABLE `Student`( `s_id` VARCHAR(20), `s_name` VARCHAR(20) NOT ...