template js ajax渲染,template-web.js在ajax中不能使用？

最新推荐文章于 2022-07-31 08:58:29 发布
最新推荐文章于 2022-07-31 08:58:29 发布
阅读量294 收藏
点赞数 1
文章标签： template js ajax渲染

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport">

<script src="./js/common/ali_rem.js"></script>

<link rel="stylesheet" href="lib/swiper/swiper.min.css">

<link rel="stylesheet" href="css/index.css">

<script src="./js/common/jquery-3.3.1.min.js"></script>

<script type="text/javascript" src="./js/common/mockjax.js"></script>

<title>首页</title>

</head>

<body>

<div class="wrap">

<div class="swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide">

<a href="http://www.baidu.com"><img src="images/index/banner.png" alt=""></a>

</div>

<div class="swiper-slide">

<a href="http://39.108.128.90:8090/activiti/518/index.dhtml"><img src="images/index/banner.png" alt=""></a>

</div>

<div class="swiper-slide">

<a href="http://39.108.128.90:8090/activiti/518/index.dhtml"><img src="images/index/banner.png" alt=""></a>

</div>

</div>

<!-- Add Pagination -->

<div class="swiper-pagination"></div>

</div>

<div class="block block-1">

<div class="ft">

<a href="/abao/info/list.dhtml?c=notice" class="more aln-y">更多</a>

<div class="text-scorll">

<i class="icon icon-horn"></i>

<ul>

<li><a href="/abao/info/show.dhtml?id=402894316076866b0160769f7e20000e" title="我的幸福刚刚好">我的幸福刚刚好</a></li>

<li><a href="/abao/info/show.dhtml?id=402894316076866b0160769eee40000d" title="爱若放手，祝福依旧">爱若放手，祝福依旧</a></li>

<li><a href="/abao/info/show.dhtml?id=402894316076866b0160769e72b7000b" title="后来，我瞒着所有人爱了你很久很久">后来，我瞒着所有人爱了你很久很久</a>

</li>

<li><a href="/abao/info/show.dhtml?id=402894316076866b0160769f7e20000e" title="我的幸福刚刚好">我的幸福刚刚好</a></li>

</ul>

</div>

</div>

</div>

<div class="bar">

<ul>

<li>

<a href="#"><span><img src="images/index/productIntroduce.png" alt=""></span><span class="text">产品介绍</span></a>

</li>

<li>

<a  href="#"><span><img src="images/index/terraceData.png" alt=""></span><span class="text">平台数据</span></a>

</li>

<li>

<a  href="#"><span><img src="images/index/safetyEnsure.png" alt=""></span><span class="text">安全保障</span></a>

</li>

<li>

<a  href="#"><span><img src="images/index/newerDirect.png" alt=""></span><span class="text">新手指引</span></a>

</li>

</ul>

</div>

<div class="block block-2">

<div class="hd">

<div class="bd">

<!-- 体验标 -->

<div class="bids-list">

<i class="newWeal"></i>

<a href="" class="item">

<span class="tit">[投资计划]2017212212</span>

<h3>新手专享</h3>

<div class="rate-bar">

<span class="rate-one">10</span>

<span class="symbol">%</span>

<span class="plus">+</span>

<span class="rate-add">2.00</span>

<span class="symbol2">%</span>

<span class="rate">年化利率</span>

</div>

<div class="info">

<div class="money-bar">剩余金额:&nbsp;&nbsp;<span class="money-num">0</span>元</div>

<div class="limit-bar">期限:&nbsp;&nbsp;<span class="limit-one"><font>12</font> 个月</span></div>

</div>

</a>

<span class="btn" οnclick="showProject(${project.id});">满标 </span>

</div>

<!-- 非体验标 -->

</div>

</div>

</div>

<!-- 底部按钮 -->

<div class="fix-nav">

<ul>

<li><a href="/abao/" class="icon icon-home  active ">

<i class="home-page"></i><div>首页</div></a>

</li>

<li><a href="/abao/project/listProject.dhtml" class="icon icon-rise ">

<i class="financial"></i><div>理财</div></a></li>

<li><a href="/abao/" class="icon icon-home  active ">

<i class="find"></i><div>发现</div></a></li>

<li><a href="/abao/usercenter/home.dhtml" class="icon icon-user ">

<i class="mine"></i><div>我的</div></a></li>

</ul>

</div>

</div>

</div>

<script src="./js/common/notice.js"></script>

<script src="lib/swiper/swiper.min.js"></script>

<script src="./js/data/mock.js"></script>

<script src="js/common/template-web.js"></script>

<script id="lunbo" type="text/template">

{{each lunbotu as lbt}}

<div class="swiper-slide">

<a href="{{lbt.alink}}"><img src="{{lbt.imglink}}" alt="{{lbt.imgalt"></a>

</div>

{{/each}}

</script>

<script>

var swiper = new Swiper('.swiper-container', {

centeredSlides: true,

autoplay: {

delay: 2500,

disableOnInteraction: false,

},

pagination: {

el: '.swiper-pagination',

clickable: true,

},

navigation: {

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

},

});

//公告

$('.text-scorll').notice();

getmock.index('index','lunbotu','https://www.rongniu360.com/index/lunbotu');

$.ajax({

url:'https://www.rongniu360.com/index/lunbotu',

type:'GET',

success:function(res){

console.log(res)

var template = template.render('lunbo',res);

console.log(template)

},

error:function(err){

console.log(err)

}

})

</script>

</body>

</html>

张简宁
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax基础：template-web的应用---搜索框自动提示、filter()筛选
昔冰_G的博客
09-21 273
利用文本框的oninput事件（当文本框内有内容输入时就会触发） 一旦有输入就会触发，而打字速度很快时就可能某个字或某个词还没有打完就已触发 也就造成了多次的无意义的触发，为了避免无意义的触发随带的请求，采取定时器 对ajax请求采用定时器进行控制（例如下面的案例：事件触发后，没800毫秒发一次请求） 页面结构是从bootstrap上找的个简单的结构：一个input文本框+一个span按钮 自动提示的内容使用ul>li来存放 选用模板：<li></li> 模板数据
用了template-web渲染页面，但是在操作复选框的选中问题时，一直无法操作
anjignren的博客
06-22 669
这是我的HTML的页面结构 [这是我的模板引擎页面的table结构以及 tbody是使用模板引擎的地方 tbody中的模板引擎以及数据 这是我使用的模板引擎渲染的部分 以下是渲染效果 我的问题 现在要设置复选框的问题 //复选框全选部分 //当thead内的checkbox被选中的时候，tbody内的所有的复选框都被选中， //当tbody内被选中的复选框与总数相等的话，那thead内的Ch...
web component 【Template】 创建自己的简单SPA应用
热门推荐
小辣抓
08-03 1万+
看到web component这么火爆，抽空写一篇关于template的博文，怎样创建一个简单的SPA应用。什么是Template在web component 中，template和它的名字一样，是一个模板标签，在它创建的上下文中，浏览器是不会去解析的，甚至不会去加载里面的任何资源，浏览器dom解析到template标签就跳过了，比如我们这样写 : <template> <img src='
模板坏处竟然这么大？如何避免
weixin_43742894的博客
04-07 335
模板的缺点： 不当地使用模板会导致代码膨胀，即二进制代码臃肿而松散，会严重影响程序的运行效率。 如何避免： 把C++模板中与参数无关的代码分离出来。
<Ajax> 七. 模板引擎的使用(template-web.js的使用)
weixin_30617561的博客
01-26 209
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title>Title</title> </head> <body> <h3>模板引擎的使用</h3> </body&...
template-web.js
05-12
1. 视图渲染：在MVVM（Model-View-ViewModel）框架中，如Vue.js，template-web.js可以用于视图层的动态渲染。 2. API响应：与Ajax请求配合，将服务器返回的数据动态填充到页面上。 3. 邮件模板：生成带有动态内容的...
template.js.zip_WEB开发_JavaScript_
08-10
总的来说，“template.js.zip”提供了一种在Web开发中利用JavaScript实现类似JSP功能的方法，这有助于开发者创建更加动态和交互丰富的网页应用。在使用前，开发者应解压文件，查看“template.js”的源代码，了解其...
markdown-template:使用marked.js 对markdown 进行简单的客户端渲染
06-27
在Web开发中，Markdown的使用非常广泛，尤其在文档撰写、博客发布、GitHub项目说明等方面。`marked.js`是一个流行的JavaScript库，用于将Markdown文本解析和渲染为HTML，方便在客户端进行展示。 **marked.js 简介**...
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
12-03
在前端，我们需要引用 Json2Template.js 文件，并通过 AJAX 请求获取 JSON 数据。收到数据后，我们可以使用 `bindTemplate` 方法将 JSON 数据绑定到预先定义的 HTML 模板中。例如，有一个隐藏的 `#template-userinfo...
前端插件art-template模板引擎art-template-test示例代码
09-24
如果你的项目中使用了jQuery，可以通过`$.ajax`获取数据后，利用`art-template`进行渲染。例如： ```javascript $.ajax({ url: 'data.json', type: 'GET', success: function(data) { var html = template('#...
template.js前端模板引擎使用详解
11-28
本文介绍了template.js前端模板引擎使用，分享给大家，具体如下： 下载地址：https://github.com/yanhaijing/template.js 作者编写的文档：https://github.com/yanhaijing/template.js/blob/master/README.md 源码学习 默认的开始标签和结束标签分别是： sTag: ‘<%’,//开始标签，可以重写，我项目中使用的是<: eTag: ‘%>’,//结束标签，我项目中使用的是:> 快速上手 编写模板 使用一个type=”text/html”的script标签存放模板，或者放到字符串中：
template-web.js框架
08-07
template-web.js框架
使用模板引擎时，Uncaught TemplateError报错原因小结
Yous的博客
07-31 2002
部分是一个对象，传错了也不会报错，只不过解析出来为空白。有注释的的情况下，会当被做文本解析，然后解析出错。听说有把class当id传的，看看是不是你，，模板引擎要在使用模板引擎的js文件上面。......
关于template.js模板渲染引擎在jsp上无法使用问题的解决方法
Mr_Liuzhongbin的博客
12-11 1520
项目简介： 项目框架：SSM， jdk版本：1.7，Tomcat版本：7.0 问题描述 最近一直苦苦找寻一种前端模板，能够对我通过ajax获得的json数据进行渲染，之前一直使用的都是对json数据进行遍历后，然后使用jQuery的append方法生成HTML元素。这种方法很麻烦，终于我找到了template.js模板渲染引擎，使用方法我参照的是https://www.cnblogs.com/th...
ajax和template相结合的使用
weixin_45168341的博客
12-31 586
ajax请求 表单提交 给我们表单绑定 submit事件 在事件处理函数里面 取消默认行为 e.preventDefault() 查看接口文档 ① 看根路径 ② 找到这个接口对应的路径 ③ 关注请求的path，请求方式，请求参数，响应的数据 利用 $.ajax() 来发送请求 在成功的回调函数里面，判断返回的状态码是否成功，如果成功，执行下一步。如果不成功，提示用户 渲染页面 当页面加载成功之后，我们发起 ajax请求，获取列表数据 在html 定义模板结构 ，利用scrip
浅谈 Web 中前后端模板引擎的使用
weixin_33912638的博客
10-30 282
前言 这篇文章本来不打算写的，实话说楼主对前端模板的认识还处在非常初级的阶段，但是为了整个 源码解读系列 的完整性，在深入 Underscore _.template 方法源码后，觉得还是有必要记下此文，为了自己备忘也好，为了还没用上前端模板引擎的同学的入门也好。（熟悉模板引擎的可以帮楼主看看文中有没有 BUG ..） 后端 MVC 说起...
flask ajax返回html,python – Ajax POST在Flask中返回render_template？
weixin_36260304的博客
06-15 583
我有一些形式应该发送到服务器(作为POST请求),将某个对象存储在数据库中,并返回一个新的模板与一些数据.在正常情况下,这可以正常工作,但是这里的问题是从表单数据中创建了一个相当复杂的JSON对象,这就是数据库中应该存储的内容. JSON被成功检索,但是模板重定向不起作用：@app.route('/entry', methods=['GET', 'POST'])def entry():if req...
在C++ 中如何使用Dust.js ，能提供一个例子吗
最新发布
03-12
可以的，以下是一个使用Dust.js的例子： 首先，需要在C中引入Dust.js的库文件，可以使用以下代码： ```javascript <script src="https://cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.7.5/dust-core.min.js"></script> ``` 然后，可以使用以下代码来编写Dust.js模板： ```javascript <script id="my-template" type="text/dust"> <h1>{title}</h1> <ul> {#items} <li>{.}</li> {/items} </ul> </script> ``` 最后，可以使用以下代码来渲染模板： ```javascript var template = dust.compile($('#my-template').html(), 'my-template'); dust.loadSource(template); var data = { title: 'My List', items: ['Item 1', 'Item 2', 'Item 3'] }; dust.render('my-template', data, function(err, out) { if (err) { console.error(err); } else { $('#my-container').html(out); } }); ``` 这样就可以将模板渲染到页面上了。希望对你有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值