如何在 html 中打印 JsonResponse 数据列表答案

【问题标题】：How To Print List Of JsonResponse Data in html如何在 html 中打印 JsonResponse 数据列表
【发布时间】：2019-07-17 21:21:55
【问题描述】：

我正在创建一个表单，我正在使用 ajax 提交表单，并在我的成功 ajax 中接收数据列表

这是我的表格：

 <form id="myForm" method="POST">

   <input type="submit" value="Refresh">
 </form>

这是我的视图函数

def refresh(request):
    user = usertab.objects.all().values()
    d={"data" : list(user)}
    return JsonResponse(d)

这是我的 ajax：

 $(document).on('submit','#myForm',function(e){
        e.preventDefault();
        $.ajax({
            type:'POST',
            url: '/refresh/',
            data:{
                csrfmiddlewaretoken : "{{ csrf_token }}"
            },
            success: function(d){
                for (a in d['data']){
                alert(a)
                }

            },
            error: function(xhr, status, error) {
                alert(xhr.responseText);
            }
        });
    });

我可以在我的成功 ajax 中接收所有用户数据，我想使用 for 循环在表中打印这些数据我是如何做到的，请告诉我

我在 dict 中申请循环，但我收到了 0 然后 1 然后 2 的警报我想在 hrml 表中打印这个数据请告诉我

这是我的桌子：

<table id="myTable">
    <thead>
        <tr>
            <th>id</th>
            <th>username</th>
            <th>email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> ??????? </td>
            <td> ??????? </td>
        </tr>
    </tbody>

</table>

【问题讨论】：

Dynamically generated table - using an array to fill in TD values 和 Convert json data to a html table 和 display array of objects in a dynamic table javascript 的可能重复
for (a in d['data']) 在 javascript 中的含义与在 Python 中的含义不同。见developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/…。我建议大多数时候使用forEach，尤其是因为 js 有很多回调，并且在传统循环中定义回调会导致错误。在这种情况下，你可以写d['data'].forEach(alert)。

标签： javascript python html django jinja2

【解决方案1】：

查看动态表行生成的演示。
请注意，代码没有使用任何外部 js 库。

<html>
<head>

<script>

var data = [{id:12,user:'jack',email:'jack@zzz.com'},
        {id:14,user:'dan',email:'dan@zzz.com'}]

		
function populate_table() {
   let table = document.getElementById('demo_table');
   for(var i = 0; i < data.length; i++) {
        let row = table.insertRow(-1);
		let cell = row.insertCell(0);
		let text = document.createTextNode(data[i].email);
        cell.appendChild(text);
		cell = row.insertCell(0);
		text = document.createTextNode(data[i].user);
        cell.appendChild(text);
		cell = row.insertCell(0)
		text = document.createTextNode(data[i].id);
        cell.appendChild(text);
   }
}

</script>
</head>
<button onclick="populate_table()">Populate table</button>

<table id="demo_table">
    <thead>
        <tr>
            <th>id</th>
            <th>username</th>
            <th>email</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

</html>

【讨论】：

好的，先生，我正在创建一个动态表，但是先生在我的 html 页面中，如果我打开页面数据表正在工作，我将使用 dataTable，但是在使用 jqury 附加数据后，它不会显示所有选项，它只显示简单表如何我解决了这个问题