常见的模板插件有 百度开发的(BaiduTemplate) ArtTemplate(腾讯开发) Template7(阿里巴巴开发) 等。 我学习了一下ArtTemplate。简单总结一下学习的ArtTemplate的知识。
使用模板引擎对于从后台返回的json数据，显示到html页面中是非常方便的。前端使用模板引擎，在html中写一些标签，与数据与逻辑基本无关。后端在渲染的时候，解析这些标签，生成HTML串。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#container{
width: 400px;
min-height: 300px;
background-color: lightgreen;
margin: auto;
padding: 10px;
text-align: center;
}
li{
list-style: none;
text-align: left;
}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/art-template.js"></script>
<script id="weather" type="text/html">
{{if weather}}
{{each weather as value}}
<div>
<span>日期:{{value.date}}</span>
<ul>
<li>白天天气:{{value.info.day[1]}}</li>
<li>白天温度:{{value.info.day[2]}}</li>
<li>白天天气:{{value.info.day[3]}}</li>
<li>白天天气:{{value.info.day[4]}}</li>
</ul>
<ul>
<li>夜间天气:{{value.info.night[1]}}</li>
<li>夜间温度:{{value.info.night[2]}}</li>
<li>夜间天气:{{value.info.night[3]}}</li>
<li>夜间天气:{{value.info.night[4]}}</li>
</ul>
</div>
{{/each}}
{{/if}}
</script>
<script type="text/javascript">
$(function(){
$("#query").click(function(){
var code=$("#city").val();
$.ajax({
url : 'http://cdn.weather.hao.360.cn/api_weather_info.php',
data:{app:'hao360',code:code},
jsonp:'_jsonp',
jsonpCallback:'abc',
dataType:'jsonp',
success:function(data){
var html=template('weather',data);
$("#info").html(html);
}
})
})
})
</script>
</head>
<body>
<div id="container">
<select id="city">
<option value="101010100">北京</option>
<option value="101020100">上海</option>
<option value="101280101">广州</option>
<option value="101280601">深圳</option>
</select>
<input type="button" value="查询" id="query">
<div id="info"></div>
</div>
</body>
</html>
clone() .insertBefore, insertAfter 交换html
var arr = new Array();
arr.push('<div>');
arr.push('html test');
arr.push('</div>');
alert(arr.join(''));
优点不需要与后台交互，缺点用js处理临时数据时，不能刷心页面，否则数据会丢失
页面
<input type="button" name="a" value="添加" onclick="addCardDetail()" class="button"> <div id="details_1" class="explain-col"> <label for="prefix_1">前缀:</label> <input type="text" name="detail[1][prefix]" id='prefix_1' size="5" class="input-text"> <label for="begin_1">开始编号:</label> <input type="text" name="detail[1][start_sn]" id='begin_1' size="5" class="input-text"> <label for="end_1">结束编号:</label> <input type="text" name="detail[1][end_sn]" id='end_1' size="5" class="input-text"> <input type="button" value="删除" onclick="deletePurchaseDetail(1)" class="button"> </div>
js
<script>
function addCardDetail() {
lastIdAttr = $("div[id^='details_']").last().attr('id'); //最后一行的id的值
strIndex = lastIdAttr.lastIndexOf('_') + 1; //取得id中数字的位置号
index = parseInt(lastIdAttr.substring(strIndex)) + 1;//待增加的序号
total = $("div[id^='details_']").size();
if (total < 10) {
var html = [
'<div id="details_' + index + '" class="explain-col">',
'<label for="prefix_' + index + '">前缀:</label>',
'<input type="text" name="detail[' + index + '][prefix]" id="prefix_' + index + '" size="5" class="input-text">',
'<label for="begin_' + index + '">开始编号:</label>',
'<input type="text" name="detail[' + index + '][start_sn]" id="begin_' + index + '" size="5" class="input-text">',
'<label for="end_' + index + '">结束编号:</label>',
'<input type="text" name="detail[' + index + '][end_sn]" id="end_' + index + '" size="5" class="input-text">',
'<input type="button" value="删除" onclick="deletePurchaseDetail(' + index + ')" class="button">',
'</div>'
].join('');
$(html).insertAfter("#" + lastIdAttr);
}
}
function deletePurchaseDetail(i) {
len = $("div[id^='details_']").size();
if (len > 1 && window.confirm("确认删除本行")) {
$("#details_" + i).remove();
} else {
alert('明细信息必须保留一行');
}
}
</script>
相关推荐
而AJAX（Asynchronous JavaScript and XML）则是一种前端技术，允许浏览器与服务器进行异步数据交换，使页面可以在不重新加载的情况下更新部分内容。 **创建（Create）操作**： 当用户提交新数据时，AJAX可以发送一...
此“Servlet+ajax+CURD实现增删改查功能程序”是一个典型的示例，展示了如何利用这些技术来实现数据的CRUD（Create、Read、Update、Delete）操作。 Servlet是Java服务器端编程的一种方式，它扩展了HTTP服务器的功能...
项目中的"angular-curd"可能包含了上述所有组件的源代码，包括HTML模板、CSS样式、JavaScript文件等。通过分析和学习这个例子，你可以深入理解如何在实际项目中使用AngularJS实现CRUD操作，并为自己的SPA应用打下...
在这个MongoDB CURD操作的示例中，我们将探讨如何在Windows 7环境下使用MongoDB进行基本的数据操作，并结合Struts2、jQuery和CSS来创建一个具有图形用户界面的Web应用。 首先，CURD是创建(Create)、读取(Retrieve)...
EXT，全称EXT JS，是一款基于JavaScript的UI库，用于构建富客户端的Web应用程序。它提供了大量的组件和功能，能够帮助开发者创建具有复杂交互和精美外观的网页应用。本教程将详细讲解如何利用EXT实现SQL Server数据...
通过Spring Initializr快速生成springboot项目+mybatis generator反向生成代码+easyui 的表单设计（增删改查-分页）+ajax异步操作+mysql源数据库+单元测试+详细注解及个人编程的运到困难
在ASP.NET MVC3项目中，结合Entity Framework或NHibernate等ORM（对象关系映射）工具，可以利用LINQ轻松实现对数据库的CURD（创建Create、读取Read、更新Update、删除Delete）操作。 下面，我们将深入探讨如何在MVC...
Java后台结合EasyUI实现CURD操作是Web应用开发中常见的需求，主要涉及到Java后端编程、数据库操作以及前端用户界面的设计。在这个项目中，“java后台+easyui完整curd”是一个利用Java技术和EasyUI框架构建的简单但...
ThinkPHP数据库操作CURD-9
"MVC3+Entity进行CURD操作"是初学者入门Web开发的良好起点，因为它结合了强大的MVC架构和便捷的数据访问层。理解并熟练掌握这些基本操作，将有助于开发者快速构建功能完善的Web应用程序。通过实践，你可以进一步探索...
在IT行业中，CURD操作是数据库管理的基本元素，它代表Create（创建）、Read（读取）、Update（更新）和Delete（删除）。CURD封装是指将这些基本操作抽象为可复用的函数或类，以便在应用程序中高效地处理数据。在前端...
- `src/main/webapp`/`static`/`js`：前端JavaScript文件，包含Ajax请求的实现和数据解析。 - `src/main/webapp`/`templates`：Thymeleaf或其他模板引擎的视图文件，用于渲染前端页面。 这个项目实例是学习和理解...
在这个"vue简单curd例子"中，我们将探讨如何利用Vue.js进行基本的CRUD（创建、读取、更新、删除）操作。 CRUD是数据库操作的基础，也是任何应用程序中的常见功能。在前端应用中，Vue.js可以通过与后端API交互来实现...
标题中的“所有使用数据库的Web应用都'just CURD Apps(只是CURD应用)'”指的是在Web开发中，大部分应用程序的核心功能围绕着四个基本操作：创建（Create）、读取（Read）、更新（Update）和删除（Delete），简称CURD...
MyBatis3是一款轻量级的Java持久层框架，它主要负责数据库的CRUD（创建、读取、更新和删除）操作。这个框架的核心理念是将SQL语句与Java代码分离，通过XML或注解的方式配置映射文件，实现动态SQL，增强了对数据库...
在实际开发中，开发者会结合这些组件，通过ThinkPHP的MVC（模型-视图-控制器）架构实现CRUD操作，以高效且灵活的方式处理数据。例如，当用户请求创建新文章时，控制器接收请求，调用模型的`create()`方法处理数据，...
在IT行业中，CURD是数据库操作的基本概念，全称为Create（创建）、Read（读取）、Update（更新）和Delete（删除）。在Web开发领域，尤其是使用PHP框架进行开发时，如ThinkPHP，CURD操作是构建任何应用的基础。这篇...
在本教程中，我们将深入探讨如何使用Maven、Spring MVC和MyBatis这三大核心技术来构建一个完整的Web应用程序，实现数据库的CURD（创建、读取、更新和删除）操作。这个过程对于初学者来说是极其有价值的，因为它涵盖...
《springboot集成mybatisplus》 --- 常用CURD操作
4. **Ajax通信**：使用jQuery或Vue.js等前端库进行异步通信，将前后端数据交换封装在JSON中。 5. **分页和排序**：LayUI提供了分页组件，可以轻松实现数据的分页展示；同时，通过传递参数，可以实现动态排序。 总结...