通过ajax实现简单的数据交互（模板引擎）

最后的结果是这样的，样式什么的自己调节，本节主要内容是ajax。

思路：
　　1，对ajax进行封装
　　2，调用ajax获取数据
　　3，在ajax获取成功的函数中进行操作
　　　3.1，模板的书写
　　　　将需要改变的数据全部使用{# demo #}这样的格式书写，以便替换里面的数据
　　　3.2，将模板里的数据替换成.json里的数据
　　　　3.2.1 创建一个模板格式化函数
　　　　　使用正则表达式提取出数据，例如提取出{# demo #}里的demo
　　　　　利用提取出的数据在.json查找，并返回数据。例如data[‘demo’]
　　　3.3 ,遍历数据
　　　　即每一个.json里的数据，都是一个模板，只是数据不同
　　4，将遍历后的数据输出到页面上

结果大概就是下面这个样子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>前后端实现简单的数据交互</title><style>* {margin: 0;padding: 0;}.product {width: 150px;height: 200px;float: left;border: 1px solid #000;padding: 10px;}.product img {width: 90%;height: 100px;display: block;margin: 1% auto;}.layer>p:first-child,.middle>p:first-child,.bottom>p:first-child {float: left;}.layer>p:last-child,.middle>p:last-child,.bottom>p:last-child {float: right;}.layer,.middle,.bottom {overflow: hidden;}</style><!-- 3，显示的模板 --><script type="text/template" id="app_tpl"><div class="product"><img src="{#img#}" alt=""><div class="layer"><p>找同款</p><p>找相似</p></div><div class="middle"><p class="price-text">￥{#price#}</p><p class="sales">{#sales#}人付款</p></div><p class="title">{#title#} </p><div class="bottom"><p class="store-text">{#store#}</p><p class="address">{#address#}</p></div></div></script>
</head><body><div id="app"></div><script type="text/javascript">// 1,对ajax进行封装var Util = {getId: function (idname) {return document.getElementById(idname);},ajax: function (obj) {obj = obj || {};obj.type = obj.type || "GET"obj.url = obj.url || '';obj.data = obj.data || null;obj.async = obj.async || true;obj.success = obj.success || function () {}obj.error = obj.error || function () {}//如果传递参数的话：数据data字符串，以&隔开，即后缀var param = [];for (var key in obj.data) {param.push(key + '=' + obj.data[key]);}var sendData = param.join("&");var xhr = new XMLHttpRequest();//当为GET/POST方式发送请求                if (obj.type.toUpperCase() === "GET") {xhr.open(obj.type, obj.url + "?" + sendData, obj.async);xhr.send();} else {xhr.open(obj.type, obj.url, obj.async);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=utf-8"); //设置头部信息xhr.send(sendData);}xhr.onreadystatechange = function () {if (xhr.readyState == 4) {if (xhr.status == 200) {obj.success && obj.success(JSON.parse(xhr.responseText));} else {obj.error && obj.error(JSON.parse(xhr.responseText));}}}}}// 格式话模板功能function formatTpl(data, str) {// 寻找 {##}内的数据，并返回何其相关的数据return str.replace(/\{#(\w+)#\}/g, function (match, $1) {return data[$1]})}var html = '';var tplInner = Util.getId('app_tpl').innerHTML;// 2，通过ajax获取数据Util.ajax({url: 'data.json',success: function (data) {// console.log(data.data.user);// console.log(Util.getId('app_tpl').innerHTML);// 遍历所需要的数据组成的数组并输出至页面上var dataList = data.data.user;for (var i = 0; i < dataList.length; i++) {// console.log(formatTpl(dataList[i],tplInner));html += formatTpl(dataList[i],tplInner);}Util.getId('app').innerHTML = html}})</script></body></html>
<!-- 思路：1，封装ajax 2，通过ajax获取数据3，显示的模板4，将模板上的数据替换成json上的数据5，显示在页面上-->

data.json数据

{"status": {"errno": "0","errmsg": ""},"data": {"user": [{"img":"img/pic_1.png","price":"1.00","title":"标题1","sales":"10","store":"店铺1","address":"广东 广州"},{"img":"img/pic_2.png","price":"2.00","title":"标题2","sales":"12","store":"店铺2","address":"广东 广州"},{"img":"img/pic_3.png","price":"3.00","title":"标题3","sales":"13","store":"店铺3","address":"广东 广州"},{"img":"img/pic_4.png","price":"4.00","title":"标题4","sales":"14","store":"店铺4","address":"广东 广州"},{"img":"img/pic_5.png","price":"5.00","title":"标题5","sales":"15","store":"店铺5","address":"广东 广州"},{"img":"img/pic_6.png","price":"6.00","title":"标题6","sales":"16","store":"店铺6","address":"广东 广州"},{"img":"img/pic_7.png","price":"7.00","title":"标题7","sales":"71","store":"店铺7","address":"广东 广州"},{"img":"img/pic_8.png","price":"8.00","title":"标题8","sales":"81","store":"店铺8","address":"广东 广州"},{"img":"img/pic_9.png","price":"9.00","title":"标题9","sales":"81","store":"店铺9","address":"广东 广州"},{"img":"img/pic_10.png","price":"10.00","title":"标题10","sales":"41","store":"店铺10","address":"广东 广州"},{"img":"img/pic_11.png","price":"11.00","title":"标题11","sales":"14","store":"店铺11","address":"广东 广州"},{"img":"img/pic_12.png","price":"12.00","title":"标题12","sales":"21","store":"店铺12","address":"广东 广州"},{"img":"img/pic_13.png","price":"13.00","title":"标题13","sales":"21","store":"店铺13","address":"广东 广州"},{"img":"img/pic_14.png","price":"14.00","title":"标题14","sales":"21","store":"店铺14","address":"广东 广州"},{"img":"img/pic_15.png","price":"15.00","title":"标题15","sales":"14","store":"店铺15","address":"广东 广州"},{"img":"img/pic_16.png","price":"16.00","title":"标题16","sales":"51","store":"店铺16","address":"广东 广州"},{"img":"img/pic_17.png","price":"17.00","title":"标题17","sales":"61","store":"店铺17","address":"广东 广州"},{"img":"img/pic_18.png","price":"18.00","title":"标题18","sales":"71","store":"店铺18","address":"广东 广州"},{"img":"img/pic_19.png","price":"19.00","title":"标题19","sales":"17","store":"店铺19","address":"广东 广州"} ]}
}

通过ajax实现简单的数据交互（模板引擎）相关推荐

ajax实现前后端数据交互
ajax实现前后端数据交互 1.在做项目的时候,或多或少都会用到ajax来实现前后端数据的交互,接下来我们就看一个简单的实例吧. 实例效果: 点击按钮,发送异步请求,请求后端的数据,显示在网页上. 接 ...
ASP.Net中关于WebAPI与Ajax进行跨域数据交互时Cookies数据的传递
本文主要介绍了ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据传递的相关知识.具有很好的参考价值.下面跟着小编一起来看下吧前言最近公司项目进行架构调整,由原来的三层架构改 ...
ajax与后台php,怎么在thinkPHP5中使用ajax实现与后台数据交互
怎么在thinkPHP5中使用ajax实现与后台数据交互发布时间:2021-03-20 17:20:01 来源:亿速云阅读:87 作者:Leah 这篇文章给大家介绍怎么在thinkPHP5中使用a ...
简单的html渲染模板引擎
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8" ...
ajax前后台交互 .net,使用ajax进行前后台的数据交互
1 什么是ajax: 异步的JavaScript和xml,跟后台交互,都用json 2 ajax干啥用的? 前后端做数据交互: 3 特点: -异步(异步和同步的区别:同步是请求发过去,要等 ...
通过Ajax获取数据并显示在表格中（原生Ajax，JQuery，Bootstrap，模板引擎）
需求页面上有一个"获取"按钮.当点击按钮时,从后端获取数据,并通过表格显示在页面上. 环境 Ubuntu 22.04 VSCode 1.67.2 jQuery v3.6.0 Bo ...
ajax 解析数组集合,ajax怎样解析json数组并用模板引擎渲染
需求是根据国家分类进行ajax获取并加载,之前没按照国家分类,显示正常,但是加入了国家分类后,不知道ajax如何修改,求解: json是数组形式的,比较复杂: { "americia&quo ...
前后端交互—模板引擎的使用过滤器的制作及使用简易的template制作
模板引擎的逛网首页及下载使用 template. http://aui.github.io/art-template/zh-cn/docs/ 一.模板引擎的使用引用, 定义模板 .渲染数据.调用t ...
简单实用的js模板引擎
转自:微点阅读 https://www.weidianyuedu.com 不足50行的js模板引擎,支持各种js语法: <script id="test_list" typ ...
ajax请求php保存数据格式,jQuery ajax与php进行数据交互（数据格式问题）
近期涉及到 jquery 开发,因此对jQuery做了一些初步的学习,jquery功能相对比较强大些,尤其是对ajax支持,jquery ajax与服务器交互,这种搭配使得"局部刷新,异步更 ...

通过ajax实现简单的数据交互（模板引擎）

通过ajax实现简单的数据交互（模板引擎）相关推荐

最新文章

热门文章