ajax动态获取数据 创建页面的几种方法 今天总结一下 工作中经常会用到
2016-07-31 21:19
716 查看
动态创建的方法一:通过创建和添加节点实现
$.ajax({ url:'data/zhuye-nav.json', success:function(data){ //获取数据成功后动态添加到页面中 var aImg=data.result; for(i=0;i<aImg.length;i++){ var Li='<li><a href="#/lieBiao"><img src='+aImg[i].img+'/></a></li>' $('.banner-c ul').append(Li); } } })动态创建的方法二:字符串拼接
buildList();
function buildList(){ $.ajax({ url:'data/zhuye-list.json', error:function(data){ alert(data); }, success:function(data){</span>
//判断,如果是字符串就先转成json再使用;
if(typeof data ==="string"){ data = JSON.parse(data); } var html = []; for(var i= 0,len = data.result.length;i<len;i++){ var item = data.result[i]; html.push(renderItem(item)); } $('#goods ul').html(html.join('')); } }); } //这里定义要动态创建的代码模块,换行用\ ,这样写结构清晰,便于后期维护修改;
//需要注意的是:下面的参数data实际就是上面的item,所以要直接写data.img;如果觉得别扭那就把下面的形参给改一个就ok了;
function renderItem(data){ var str='<li>\ <a href="#/lieBiao">\ <img src="'+data.img+'" />\ <div>\ <span style="white-space:pre"> </span><p>'+data.name+'</p>\ <span>'+data.jieshao+'</span>\ <span>'+data.price+'</span>\ </div>\ <i></i>\ </a>\ </li>'; return str;
</pre><pre code_snippet_id="1807280" snippet_file_name="blog_20160804_18_1168966" name="code" class="javascript">
动态创建的方法三:使用baidutemplate实现(推荐)
他其实是个JS模板引擎,点击这里去官网上下载这个js文件,灰常灰常轻量级
1、在html页面中需要写如下的代码</strong></span><span style="font-size:24px;">,也就是我们要动态创建的代码块,在这里我们把他当<span style="font-family: Arial, Helvetica, sans-serif;">做是一个模板来使用,注意这里的写法:一个是,另</span></span>
外一个是所有的js代码块都要用分隔符包起来,分隔符的格式<% 这里是js代码 %>
<section id="main">
<ul><!--数据通过动态添加--><!--使用下面创建的模板块--></ul></section><!--在这里创建一个模板块--><script id="list_tpl" type="text/html"><%for(var i=0,len = result.length;i<len;i++){%><li><a href="#/xiangQing"><img src="<%=result[i].img%>"/></a><div><p><%=result[i].name%></p><span><%=result[i].price%></span></div></li><%}%>
<span style="white-space:pre"> </span></script>
</pre><pre code_snippet_id="1807280" snippet_file_name="blog_20160804_19_4996213" name="code" class="javascript">js文件中的代码这样写
buildListBT();function buildListBT(){$.ajax({url:'data/liebiao-list.json',error:function(data){alert(data);},success:function(data){var html = baidu.template('list_tpl',data);$('#main ul').html(html);}});}一定要弄明白这两个是怎么联系到一起去的,在ajax获取数据之后的success回调函数中通过baidu.template('list_tpl',data); 相当于是把获取来的data数据送到list_tpl中进行了一次加工过程,list_tpl就是我们在html页面中定义的那个模板块,然后再将结果赋值给了变量html,最后将其追加到ul中;以上说的这三种方法用着都挺方便的,但是当我们要动态创建的对象比较复杂的时候通过节点创建和追加的方式可能就比较麻烦了,搞不好思维会乱掉,使用下面的两种方法就能很好的结局这个问题,而且在后期代码的维护方面也可以节省不少时间;好了,就说这么多吧,有问题就留言,有好的方法也请您不要吝啬哦。
相关文章推荐
- android toast几种使用方法 toast经常会用到,今天做个总结
- 基于$.ajax()方法从服务器获取json数据的几种方式总结
- MVC中的页面传值,通常指Controller和view之间的数据传递,经常用到的有几种方式,总结如下:
- java servlet 几种页面跳转的方法,需要的朋友可以参考一下 在访问网页的过程中,页面自动刷新、跳转和重定向是经常用到的,这里就说说在Java中是如何实现这些功能的! 一、页面自动刷新
- 动态事创建的a标签上利用jq滑过元素执行事件通过ajax获取后台数据根据鼠标位置展示数据内容,鼠标离开消失
- WebForm.aspx 页面通过 AJAX 访问WebForm.aspx.cs类中的方法,获取数据
- 总结一下query中ajax的几种方法
- MVC4中AJAX Html页面打开调用后台方法实现动态加载数据库中的数据
- 总结Asp.net中Page加载PostData的具体过程 进而解决"获取动态创建的控件的PostData数据"问题
- JS-利用ajax获取json数据,并传入页面生成动态tab
- WebForm.aspx 页面通过 AJAX 访问WebForm.aspx.cs类中的方法,获取数据(转)
- 今天来马克一下把数据库中的数据动态显示到前台页面下拉框中/默认选中
- ajax获取到数据却走error方法的错误总结
- 工作总结22 firefox 阻止此页面创建其他对话框的解决方法
- DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
- Java获取随机数的3种方法和总结(正在做一个小游戏 用到了 想总结一下 保存了 以后自己看)
- Ajax获取数据然后显示在页面的实现方法
- 前台使用ajax动态获取数据并且显示在页面上,SSM框架二级联动
- javaWeb页面中Ajax原始调用方法,及数据转换成Json的原始方法总结
- 页面向下滚动ajax获取数据的实现方法(兼容手机)