ThinkPHP3.2.3通过ajax获取指定字段,循环遍历渲染到视图层

2017-01-13 10:52:14来源:oschina作者:botkenni人点击

1.页面按钮


v

这里面放ajax获取遍历的数据

2.ajax部分


//显示用户详情信息
$(".shop_detail").click(function(){
var id = $(this).attr("tag");
//URL注意些对,否则报错,以下两种形式都可以
//$.get("http://www.fuhuaqi.com/index.php/Admin/Activitylist/activitynum?id=" + id,
$.get("/Admin/Activitylist/activitynum?id=" + id,
function(data){
//每次打开一个清空一下数据,否则后面的会一直追加下去
$(".model_content_shop").html('');
var obj = jQuery.parseJSON(data);
//如果是单条数据直接这里放到页面去
//$("#product_ja_name").html(obj.ja_name);
//$("#product_ja_tel").html(obj.ja_tel);
//判断数据是否为空,为空直接挑出
if ( ! obj ) {
return;
}
//开始遍历循环数据
for ( i = 0, len = obj.length; i < len; i++ ) {
item = obj[ i ];
//$("#product_ja_name").html(item['ja_name']);
//$("#product_ja_tel").html(item['ja_tel']);
//计算序号
var key= i+1;
//把数据进行拼接,然后追加到页面去
var str ="
序号姓名手机号
"+key+""+item['ja_name']+""+item['ja_tel']+"
";
//进行追加遍历到页面去
$(".model_content_shop").append(str);
}
});
//显示出弹出框
$("#show_model_shop").show();
});
//隐藏商品信息
$("#close_model_shop,#sure_edit_shop").click(function(){
$("#show_model_shop").hide();
//每次关闭的时候,清除一下数据,否则每次打开先清空会导致缓慢,上面是打开之前清空,这里是关闭之后清空,根据实际需求来实现
$(".model_content_shop").html('');
});

改进版的代码:


1.需要放置的页面位置




2.ajax代码


//显示用户详情信息
$(".shop_detail").click(function(){
var id = $(this).attr("tag");
$.get("/Admin/Activitylist/activitynum?id=" + id,
function(data){
var obj = jQuery.parseJSON(data);
if ( ! obj ) {
return;
}
function each(obj) {
var str = "";
for (i = 0, len = obj.length; i < len; i++) {
item = obj[i];
var key = i + 1;
str += "";
}
str += "
序号姓名手机号
" + key + "" + item['ja_name'] + "" + item['ja_tel'] + "
";
return str;
}
$(".model_content_shop").append(each(obj));
});
$("#show_model_shop").show();
});
//隐藏商品信息
$("#close_model_shop,#sure_edit_shop").click(function(){
$("#show_model_shop").hide();
$(".model_content_shop").html('');
});

效果:


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台