首页 新闻 搜索 专区 学院

动态菜单栏显示,Ajax与数据库交互,显示没有分类?为什么?

0
悬赏园豆:15 [已解决问题] 解决于 2014-03-22 23:36

<script type = "text/javascript">

    //获取商品类别

    $(document).ready(function () {

        $("#ul_proc").html("");

        $.getJSON("Ajax/JQproc.ashx?type=title", function (json) {

            $.each(json, function (i) {

                var fathid = json[i].ID;

                var ul_id = "ul_"+json[i].ID;

                $("#ul_proc").append("<li>" + "<h2 class='psa'>" + "<a href='#'>" + json[i].Name + "</a>" + "</h2>");

                $("#ul_proc").append("<ul id='ul_id'>" + "<div class='b_t'>" + "</div>");

                

                $.ajax({

                    url: "Ajax/JQproc.ashx?type=getproc",

                    dataType: "json",

                    data: {

                        _fathid: fathid

                    },

                    success: function (json1) {

                        $.each(json1, function (j) {

                            $("#ul_id").append("<li>" + "<a href=''>" + json1[j].Name + "</a>" + "</li>");

                        })

                    }

                }),

                $("#ul_id").append("<li class='b_b'></li>" + "</ul>");

                $("#ul_proc").append("</li>");

            })

        })

    });

 

</script>

<div class="sbox">
  <div class="sbox_m">
    <ul class="c_list" id="ul_proc"> 

   </ul>
  </div>
</div>

防水与不防水是在裸板电源的类别里,但现在没有显示在裸板电源那个位置,为什么??

橙仔的主页 橙仔 | 初学一级 | 园豆:142
提问于:2013-05-30 03:18
< >
分享
最佳答案
0
var fathid = json[i].ID;
var ul_id = "ul_" + json[i].ID;
$("#ul_proc").append("<li>" + "<h2 class='psa'>" + "<a href='#'>" + json[i].Name + "</a>" + "</h2>");
$("#ul_proc").append("<ul id='ul_id'>" + "<div class='b_t'>" + "</div>");

$.ajax({
    url: "Ajax/JQproc.ashx?type=getproc",
    dataType: "json",
    data: {
        _fathid: fathid
    },
    success: function (json1) {
        $.each(json1, function (j) {
            $("#ul_id").append("<li>" + "<a href=''>" + json1[j].Name + "</a>" + "</li>");
        })
    }
});
$("#ul_id").append("<li class='b_b'></li>" + "</ul>");
$("#ul_proc").append("</li>");

用Ajax不小心的话经常会出现这种问题。

先是执行蓝色,灰色部分是父级《充电器》和《裸板电源》,绿色是给父级的元素添加结束符

问题就在灰色部分是同步获取数据,与此同时,绿色部分开始执行了。

也就是说,你原计划是先获取子元素然后添加结束符,可是结束符提前被添加了

修改:

var fathid = json[i].ID;
var ul_id = "ul_" + json[i].ID;
$("#ul_proc").append("<li>" + "<h2 class='psa'>" + "<a href='#'>" + json[i].Name + "</a>" + "</h2>");
$("#ul_proc").append("<ul id='ul_id'>" + "<div class='b_t'>" + "</div>");

$.ajax({
    url: "Ajax/JQproc.ashx?type=getproc",
    dataType: "json",
    data: {
        _fathid: fathid
    },
    success: function (json1) {
        $.each(json1, function (j) {
            $("#ul_id").append("<li>" + "<a href=''>" + json1[j].Name + "</a>" + "</li>");
        });
        $("#ul_id").append("<li class='b_b'></li>" + "</ul>");
        $("#ul_proc").append("</li>");
    }
});
收获园豆:15
TiestoRay | 小虾三级 |园豆:687 | 2013-05-30 07:57

把那两行代码搬上去后,程序报错了,说原来那个位置缺少表达式。

橙仔 | 园豆:142 (初学一级) | 2013-05-30 08:47

@橙仔: 

$.ajax({
    url: "Ajax/JQproc.ashx?type=getproc",
    dataType: "json",
    data: {
        _fathid: fathid
    },
    success: function (json1) {
        $.each(json1, function (j) {
            $("#ul_id").append("<li>" + "<a href=''>" + json1[j].Name + "</a>" + "</li>");
        })
    }
}),

是不是最后的那个逗号你还留着?那里应该是分号的

TiestoRay | 园豆:687 (小虾三级) | 2013-05-30 08:50

@TiestoRay: 还是原来的结果,没有变化。

橙仔 | 园豆:142 (初学一级) | 2013-05-30 09:03

@橙仔: 把报错的位置和信息截个图看看吧

TiestoRay | 园豆:687 (小虾三级) | 2013-05-30 09:31

@TiestoRay: 还是原来那样子,代码没有出错。

<script type = "text/javascript">
    //获取商品类别
    $(document).ready(function () {
        $("#ul_proc").html("");
        $.getJSON("Ajax/JQproc.ashx?type=title", function (json) {
            $.each(json, function (i) {
                var fathid = json[i].ID;
                var ul_id = "ul_" + json[i].ID;
                $("#ul_proc").append("<li>" + "<h2 class='psa'>" + "<a href='#'>" + json[i].Name + "</a>" + "</h2>");
                $("#ul_proc").append("<ul id='ul_id'>" + "<div class='b_t'>" + "</div>");

                $.ajax({
                    url: "Ajax/JQproc.ashx?type=getproc",
                    dataType: "json",
                    data: {
                        _fathid: fathid
                    },
                    success: function (json1) {
                        $.each(json1, function (j) {
                            $("#ul_id").append("<li>" + "<a href=''>" + json1[j].Name + "</a>" + "</li>");
                        });
                        $("#ul_id").append("<li class='b_b'></li>" + "</ul>");
                        $("#ul_proc").append("</li>")
                    }
                });
                //                $("#ul_id").append("<li class='b_b'></li>" + "</ul>");
                //                $("#ul_proc").append("</li>");
            })
        })
    });

</script>

橙仔 | 园豆:142 (初学一级) | 2013-05-30 14:12

@橙仔: 

//获取商品类别
$(document).ready(function () {
    $("#ul_proc").html("");
    $.getJSON("Ajax/JQproc.ashx?type=title", function (json) {
        $.each(json, function (i) {
            var fathid = json[i].ID;
            var ul_id = "ul_" + fathid;

            var html = "<li><h2 class='psa'><a href='#'>" + json[i].Name + "</a></h2>";
            html += "<ul id=" + ul_id + "><div class='b_t'></div>";

            $.ajax({
                url: "Ajax/JQproc.ashx?type=getproc",
                dataType: "json",
                data: {
                    _fathid: fathid
                },
                success: function (json1) {
                    $.each(json1, function (j) {
                        html += "<li><a href=''>" + json1[j].Name + "</a></li>";
                    });
                    html += "<li class='b_b'></li>";
                    html += "</ul>";
                    html += "</li>";
                    $("#ul_proc").append(html);
                }
            });
        })
    })
});

试试这个

TiestoRay | 园豆:687 (小虾三级) | 2013-05-30 14:32

@TiestoRay: 这个就只能显示充电器和裸板电源。那些子类别全没了。。

橙仔 | 园豆:142 (初学一级) | 2013-05-30 14:49
其他回答(1)
0

chrome开发者工具,看下你的返回的数据对不对

chenping2008 | 园豆:9836 (大侠五级) | 2013-05-30 09:30
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册