Question

我非常擅长写ajax和使用一个安静的api ...所以，请耐心等待。

我有一个我在后端使用的Laravel 5.2 RESTful API，我试图只使用Jquery / Ajax加载一个类别列表。当你点击类别时，每个子类别加载正常，但我似乎无法让“后退”按钮工作（通过这个，我的意思是我生成的LI，而不是浏览器后退按钮）。当您单击它时，它会显示警报 - 并且数据是正确的，但就是这样。该列表不会刷新并填充适当的项目。

修改

也没有错误被抛到javascript控制台。它只是不会从ajax调用填充。

编辑

我在创建原始帖子后立即删除了request.abort（）。

编辑

以下是从URL api / categories / 4返回的JSON - 作为示例。

[{ “ID”：6， “父”：4 “名称”： “sub_subcat4_1”， “塞”： “sub_subcat4_1”， “描述”：NULL， “created_at”：空 “的updated_at”：空}，{ “ID”：7， “父”：4 “名称”： “sub_subcat4_2”， “塞”： “sub_subcat4_2”， “描述”：NULL， “created_at”：空 “的updated_at”：空}]

修改

以下是#categories

的HTML

<div class="row">
<div class="col-sm-12">
    <ul id="categories">
    </ul>
</div>

Javascript

    <script>
    /*
     * This loads the default / root categories.
     */
    function getRootCategories() {
        $.getJSON("api/categories", function(data) {
            var categories = [];
            $("#categories").html("");
            $.each(data, function(key, val) {
                $("#categories").append("<li class='subcat' data-id='" + val.id + "' onClick='getSubcats(this);'>" + val.name + '</li>');
            });
        });
    }

    /*
     * This loads the sub categories if there's any data returned. Otherwise, just leave the user where they are.
     */
    function getSubcats(cat) {
        var dataID = cat.getAttribute("data-id");
        alert(dataID);
        if(dataID == "null") {
            getRootCategories();
        }
        else {
            $.getJSON("api/categories/" + dataID, function (data) {
                if (data.length != 0) {
                    $("#categories").html("");
                    var newCats = '';
                    var parent = '';
                    $.each(data, function (key, val) {
                        parent = "<li class='subcat' data-id='" + val.parent + "' onClick='getSubcats(this);'>Back</li>";
                        newCats += "<li class='subcat' data-id='" + val.id + "' onClick='getSubcats(this);'>" + val.name + '</li>';
                    });
                    $("#categories").append(parent + newCats);
                }
            });
        }
    }

    $(document).ready(function() {
        $.ajaxSetup({ cache:false });
        getRootCategories();
    });
</script>

Answer 1

好的，我刚把变量搞得一团糟。我没有设置正确的父ID。

新脚本如下所示 -

    <script>
    var previous = null;
    /*
     * This loads the default / root categories.
     */
    function getRootCategories() {
        $.getJSON("api/categories", function(data) {
            var categories = [];
            $("#categories").html("");
            $.each(data, function(key, val) {
                $("#categories").append("<li class='subcat' data-parent='" + val.parent + "' data-id='" + val.id + "' onClick='getSubcats(this);'>" + val.name + '</li>');
                previous = val.parent;
            });
        });
    }

    /*
     * This loads the sub categories if there's any data returned. Otherwise, just leave the user where they are.
     */
    function getSubcats(cat) {
        var dataID = cat.getAttribute("data-id");
        previous = cat.getAttribute("data-parent");

        if(dataID == "null") {
            getRootCategories();
        }
        else {
            $.getJSON("api/categories/" + dataID, function (data) {
                if (data.length != 0) {
                    $("#categories").html("");
                    var newCats = '';
                    var parent = '';
                    $.each(data, function (key, val) {
                        parent = "<li class='subcat' data-id='" + previous + "' onClick='getSubcats(this);'>Back</li>";
                        newCats += "<li class='subcat' data-parent='" + val.parent + "' data-id='" + val.id + "' onClick='getSubcats(this);'>" + val.name + '</li>';
                    });
                    $("#categories").append(parent + newCats);

                }
            })
            .fail(function(jqxhr, textStatus, error) {
                console.log("Request Failed: " + textStatus + " - " + error);
            });
        }
    }

    $(document).ready(function() {
        $.ajaxSetup({ cache:false });
        getRootCategories();
    });
</script>

JQuery Ajax按钮不起作用

1 个答案: