`
hudeyong926
  • 浏览: 2016770 次
  • 来自: 武汉
社区版块
存档分类
最新评论

AJAX结合JS模板引擎 HTML操作CURD

HTMLjQueryJavaScriptPHPIDEA 
阅读更多

常见的模板插件有 百度开发的(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>

 

  • 大小: 131 KB
分享到：
| 通用表单验证formvalidator4.1.3 后端验证
评论
1 楼 ballence 2010-11-12  
支持楼主， 继续努力
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics