如何通过 Ajax 调用创建可点击链接的动态列表答案

【问题标题】：How to create dynamic list of clickable links through Ajax call如何通过 Ajax 调用创建可点击链接的动态列表
【发布时间】：2018-02-21 10:42:47
【问题描述】：

我想在名为 img_list 的 div 中创建一个动态链接列表，当我单击任何一个链接时，它将通过 Ajax 调用在相邻的 iframe 中打开。

所以我做了以下事情：

 <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <div id="img_list">
        </div>
        <iframe id="img_loc" width="300" class="modal-content"
            height="500"
            allowfullscreen data-token="3Az3ki"></iframe>
        <div id="caption"></div>
  </div>

 var imageList = function (projId, locCode) {
            return $.ajax({
                type: "POST",
                url: "SeventhNavi.aspx/ListImages",
                data: JSON.stringify({ projId: projId, locCode: locCode }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                cache: false
            });

        };

modal.style.display = "block";
            imageList(1, 'G11').done(function (data) {
                var appenddata;
                $.each(data, function (key, value) {
                    appenddata += "<a href = '" + value.loc_path + " '>" + value.description + " </a>";
                });
                $('#img_list').html(appenddata);

            });

我返回的Json对象是这样的：

[{"description":"demo","loc_path":"https://en.wikipedia.org/wiki/Computer#/media/File:DM_IBM_S360.jpg"},{"description":"demo","loc_path":"https://en.wikipedia.org/wiki/Computer#/media/File:Eniac.jpg"},{"description":"demo","loc_path":"https://en.wikipedia.org/wiki/Computer#/media/File:Cray_2_Arts_et_Metiers_dsc03940.jpg"}]

此代码不起作用！

【问题讨论】：

控制台出现什么错误？
@programtreasures 没有错误只是 value.loc_path,value.description 未定义，尽管 imageList 函数返回 Json 数据
value 的输出是什么？
@ChrisSatchell : udefined，我尝试遍历 Json 对象并设置 href 和链接名称属性
@AnynameDonotcare 您的 data.d 是字符串化响应吗？如果是这样，请使用JSON.parse。另外，我建议使用let 或const 而不是var，以防出现范围问题。

标签： javascript jquery asp.net json ajax

【解决方案1】：

API返回的对象数组，需要通过索引来访问，

        modal.style.display = "block";
        imageList(1, 'G11').done(function (data) {
            var appenddata;
            for(var i =0 ; i<data.length; i++){
                appenddata += "<a href = '" + data[i].loc_path + " '>" + data[i].description + " </a>";
            }
            $('#img_list').html(appenddata);

        });

【讨论】：

你确定吗？据我了解，$.each 也适用于数组
这不起作用，因为我使用 `data: JSON.stringify({ projId: projId, locCode: locCode })` 所以数据不能这样处理，你能推荐一些解决这个问题的方法吗问题

【解决方案2】：

根据@SILENT，我执行以下操作：

imageList(1, 'G11').done(function (data) {
                let appenddata = '';
                data.d = JSON.parse(data.d); //Fix the problem
                $.each(data.d, function (key, value) {
                    if (typeof value !== 'undefined' && value) {
                        appenddata += "<a href = '#' id = '" + value.loc_serial + "'" + ">" + "<img border='0' alt= '" + value.description + "'" + " src= '" + value.thumbnail + "'" + " width='100' height='100' > " + " </a> ";
                        appenddata += " <input id = '" + value.loc_serial + "'" + " type='hidden' " + " value= '" + value.loc_path + "'" + "> "
                    }
                });
                $('#img_list').html(appenddata);

            });

将数据解析为 JSON 对象解决了我的问题：

data.d = JSON.parse(data.d);

【讨论】：