Question

我已经从json响应创建了一个bootstrap菜单。菜单获取项目列表并创建指向https://example.com/api/products/GetProductDetail/product_id的链接，该链接将您带到json响应。

我需要它做的不是遵循json响应的链接，而是获得响应，解析数据并将其插入现有页面上的div，但我不知道如何做到这一点。

这就是我现在所拥有的：

<script>
    $.getJSON('https://example.com/api/products/GetProductList/', function(data) {
        var output = '<div class="panel panel-default">';
        for (var i in data.Categories) {
            output += '<div class="panel-heading '+data.Categories[i].category_id +'"><a data-toggle="collapse" data-parent="#accordion" href="#' + data.Categories[i].category_id + '-products">';
            output += data.Categories[i].Category + '</a></div>';
            output += '<div id="' + data.Categories[i].category_id + '-product" class="panel-collapse collapse"><div class="panel-body">';
            for (var j in data.Categories[i].Products) {
                output += '<li><a href="https://example.com/api/products/GetProductDetail/'+data.Categories[i].Products[j].product_id+'">'+data.Categories[i].Products[j].short_description + " -- " + data.Categories[i].Products[j].cost+' coins</a></li>';
            }
            output += "</div></div>";
        }
        output += "</div>";

        document.getElementById("accordion").innerHTML = output;
    });
</script>

Answer 1

创建指向接受productid的某个功能的链接，而不是创建指向产品详细信息URL的链接。此函数可以像您当前对产品列表那样进行调用，处理json并将结果附加到div。

添加如下函数：

function getProduct(id) {
    $.getJSON('https://example.com/api/products/GetProductDetail/' + id, function(data) {
        //Process JSON to some HTML.
        var productDetails = '<div>' + data.Product.Name + '</div>';
        //Add it to the div where you want your product details to appear
        document.getElementById("detailsDiv").innerHTML = productDetails;
    };
}

并使用以下内容替换为概述中的每个产品创建的li：

output += '<li><a onclick="getProduct(' + data.Categories[i].Products[j].product_id + ');">'+data.Categories[i].Products[j].short_description + " -- " + data.Categories[i].Products[j].cost+' coins</a></li>';

创建jquery菜单 - json响应

1 个答案: