jquery+ajax渲染,简单的拼接字符串
2017-10-30 12:29
411 查看
.html
.json
.js
<div class="addressul"> <ul> </ul> </div>
.json
{ "status": "Y", "data": [{ "id": "0001", "name": "张三", "province": "山东", "city":"烟台", "area":"芝罘区", "address": "新城街道", "mobile":"18660057131", },{ "id": "0002", "name": "李四", "province": "山东", "city":"烟台", "area":"福山区", "address": "新城街道", "mobile":"16607891700", },{ "id": "0002", "name": "露露", "province": "海南市", "city":"三亚经济开发区", "area":"东东西", "address": "的街道", "mobile":"13607891700", }] }
.js
$.ajax({ url: seajs.api.address, type: 'GET', dataType: 'json', success: function(res) { if(res.status==="Y"){ if(res.data.length > 0){ for (var i = 0; i <res.data.length ; i++) { var data=res.data[i]; $('.addressul ul').append( '<li class="address_cont" id="address_cont">'+ '<a class="add_xx" href="">'+ '<div class="xx_left">'+ '<div class="xl_top">'+ '<span class="_name"><i class="ion"></i>'+data.name+'</span>'+ '<span class="_iphone"><i class="ion"></i>'+data.mobile+'</span>'+ '</div>'+ '<div class="xlauto">'+data.province+data.area+data.address +'</div>'+ '</div>'+ '</a>'+ '</li>' ); } } }else{ console.log('链接失败'); } } });
相关文章推荐
- jquery拼接ajax 的json和字符串拼接的方法
- jquery ajax post 方式 data中以json形式并且定义的是拼接好的字符串变量
- Jquery和JS用外部变量获取Ajax返回的参数值!(超简单)
- JQuery_Ajax预处理字符串-serialize()方法获取表单值
- SpringMVC+Ajax+拼接html字符串实例代码
- 基于jquery的ajax分页控件的简单实现
- php+jquery+ajax+json简单小例子
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- 比较简单的jquery教程 Easy Ajax with jQuery 中文版全集第1/3页
- jquery的ajax效果最简单实现 及innerhtml()和innertext()的区别
- jQuery.ajax的简单应用实例 附实例下载
- jQuery实现的AJAX简单弹出层效果代码
- jquery拼接字符串
- 利用JQuery实现简单AJAX
- C# asp.net与jquery做ajax简单进度条
- Jquery的each函数拼接字符串传参问题
- jquery-ajax简单示例
- 原生js方式实现ajax,并仿jquery方式简单调用
- jQuery的ajax 简单解析与实现
- jquery 简单ajax应用