如何在 html 标签（如 p 或 div）中显示来自 ajax 的数据答案

【问题标题】：how to display data from ajax in html tag like p or div如何在 html 标签（如 p 或 div）中显示来自 ajax 的数据
【发布时间】：2021-06-02 09:43:01
【问题描述】：

        url:'{{ route("dashboard.diklat_name") }}',
        data:{dari:dari, sampai:sampai},
        type: 'get',
        dataType: 'json',
        success:function(response) {
            var len = 0;
            len = response['data'].length;
            
            if (len > 0) {
                for (var index = 0; index < len; index++) {
                    document.getElementById('diklat_name').innerHTML = response['data'][index].name;
                    console.log(response['data'][index].name);
                }
            }
        }

此代码给我 1 个显示。但在日志中它会返回我得到的尽可能多的数据。

例如，我有 50 个数据，我想将其显示在

谢谢

【问题讨论】：

你能显示你的控制器方法代码吗
还有 dd(resposne ) 在 laravel 端并显示 .so 我们可以轻松帮助 yoi

标签： javascript php ajax laravel

【解决方案1】：

试试这个。

    url:'{{ route("dashboard.diklat_name") }}',
        data:{dari:dari, sampai:sampai},
        type: 'get',
        dataType: 'json',
        success:function(response) {
            var len = 0;
            len = response['data'].length;
            
            if (len > 0) {
                let data = '';
                response['data'].forEach((item) => {
                   data += "<p>" + item.name + "</p>";
                   console.log(item.name);
                )}
                document.getElementById('diklat_name').innerHTML = data;
            }
        }

【讨论】：

【解决方案2】：

您可以使用字符串插值并连接所有生成的 p 标签来获取 p 标签内的所有数据。

let allNamesElement = '';
for (var index = 0; index < len; index++) {
     allNamesElement += `<p>${response['data'][index].name}</p>`;
     console.log(response['data'][index].name);
}

document.getElementById('diklat_name').innerHTML = allNamesElement;

【讨论】：

【解决方案3】：

你可以试试这个

 url:'{{ route("dashboard.diklat_name") }}',
        data:{dari:dari, sampai:sampai},
        type: 'get',
        dataType: 'json',
        success:function(response) {
            var len = 0;
            len = response['data'].length;
            let html =  document.getElementById('diklat_name').innerHTML;
            if (len > 0) {
                for (var index = 0; index < len; index++) {
                  html  += response['data'][index].name;
                    console.log(response['data'][index].name);
                }
            }
        }

【讨论】：