使用javascript来显示Django对象

pnwntuvh 于 2022-12-01 发布在 Go

关注(0)|答案(1)|浏览(153)

我想实现下面使用javascript这样行点击它将得到索引和显示对象的这个索引。
在django模板中这是有效的。

<div>{{ project.0.customer_name}}</div>
<div>{{ project.1.customer_name}}</div>

但下面的javascript不工作，即使我得到正确的ID。

var cell = row.getElementsByTagName("td")[0];
var id=  parseInt(cell.innerHTML);
// not working
document.getElementById('lblname').innerHTML =   '{{ project.id.customer_name}}';

// this is also working but what I want is dynamic base on row click
document.getElementById('lblname').innerHTML = '{{ project.1.customer_name}}';

在javascript中使用索引显示django对象。

django

来源：https://stackoverflow.com/questions/74624791/use-javascript-to-display-django-object

1条答案

按热度按时间

a5g8bdjr1#

您必须了解您的代码发生了什么：
在服务器上处理如下模板：

'{{ project.id.customer_name}}'

我相信您的服务器端没有project.id，所以您在上面的行中得到None，并且moustache标记变成smth，就像一个空字符串，实际的JavaScript代码如下所示：

document.getElementById('lblname').innerHTML = '';

现在才执行JS代码，您可以想象它会做什么。
您需要的是在JS中设置了id变量后处理moustache标签，这不是stuff的工作方式（至少，如果您没有一些疯狂的工具链的话）。

实现所需目的的一种方法是通过执行以下操作将整个project对象（或数组）提供给JavaScript：

<script>
const project = {{ project|safe }};
</script>

一个完整的Django模板应该是这样的（我用<span>代替了表格单元格：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>django test</title>
</head>
<body>
{% block content %}
{% for item in project %}
<span data-id="{{ forloop.counter }}">{{ forloop.counter }}</span>
{% endfor %}

<div id="output" style="display: flex; flex-direction: column-reverse;">
</div>

<script>
const project = {{ project|safe }};
const spans = document.getElementsByTagName('span');
const output = document.getElementById('output');

const onSpanClick = (event) => {
    const id = parseInt(event.target.getAttribute('data-id'), 10) - 1; // forloop.counter is 1-based, JS arrays are 0-based
    const div = document.createElement('div');
    div.innerHTML = project[id].customer_name;
    output.appendChild(div);
}

Array.from(spans).forEach(span => {
    span.addEventListener('click', onSpanClick);
})

</script>
{% endblock %}
</body>
</html>

另一种方式是AJAX方式：在服务器端创建一个API端点，这样example.com/api/customer_name/?id=999当您单击某个元素并触发一个paramid =999的XMLHttpRequest时，像www.example.com这样的URL就会以customer id = 999的名称响应您。

赞(0）回复(0）举报 2022-12-01

我来回答

使用javascript来显示Django对象

1条答案

相关问题

热门标签

最新问答