在我的 Django 元素中，我有一个所有客户的列表页面。 在该页面上，所有客户列表都显示，我在那里有一个 is_active 归档。 如果我点击更改状态按钮(客户列表页面的每一行都有一个更改状态按钮)is_active 字段变为假而不重新加载我的列表页面。当我再次点击更改状态按钮时它变为真。请通过给我一个帮助我它的示例代码。 我的列表页面如下-
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<form id="myform" method = "POST" action="#">
<table>
<tr>
<th>Name</th>
<th>Location</th>
<th>quantity</th>
<th>time</th>
<th>fb_id</th>
<th>contact_number</th>
<th>is_active</th>
<th>Action</th>
</tr>
{% for lead in leads %}
<tr>
<td>{{lead.customer_name}}</td>
<td>{{lead.location}}</td>
<td>{{lead.quantity}}</td>
<td>{{lead.time_requirement}}</td>
<td>{{lead.fb_id}}</td>
<td>{{lead.contact_number}}</td>
<td>
{% if lead.is_active %}
<input type="radio" value="" checked>
{% else %}
<input type="radio" value="" >
{% endif %}
<button name="button" value="OK" type="button" >change status</button>
</td>
<td><button name="button" value="OK" type="button" align="middle"><a href="/customapi/vendor/detail-customer-leads/?lead_id={{lead.id}}">Edit</a></button>
</td>
</tr>
{% endfor %}
</table>
</form>
</body>
</html>
最佳答案
您可以使用AJAX
首先您必须定义一个 AJAX View :
from .model import Customer# import here your model
from django.http.response import JsonResponse
from django.shortcuts import get_object_or_404
def ajax_view(request):
results = {}
if request.method == 'POST':
pk = request.POST.get('pk',None)
if pk:
customer = get_object_or_404(Customer, id=pk)
results['code'] = 200
if customer.is_active:
customer.is_active = False
results['status'] = 'inactive'
else:
customer.is_active = True
results['status'] = 'active'
customer.save()
else:
results['code'] = 404
else:
results['code'] = 500
return JsonResponse(results)
然后在urls.py中创建一个新的url:
url(r'^activeConsumer$', views.ajax_view, name ="active_consumer"),
之后，在您的模板中使用 JQuery 定义一个 AJAX 调用:
<script>
function active_consumer(id) {
//AJAX DATA
//you have to send data to server
// first you have to get the id of the consumer
// second you have to pass `csrfmiddlewaretoken` with data
data = {
'pk':id,
'csrfmiddlewaretoken' : '{{csrf_token}}' };
//AJAX CALL
$.post( "{% url 'active_consumer' %}", data).done(function(response) {
if (response.code == 200) {
if (response.status == "active") {
//here you have to change the status of the consumer to active in HTML
}
else {
//here you have to change the status of the consumer to inactive in HTML
}
}
});
}
</script>
在您的 HTML 中，您调用了 javascript 函数 active_consumer :
<button name="button" value="OK" type="button" onclick="active_consumer({{lead.id}})" >change status</button>
更新:
要选中或取消选中单选按钮，您必须给它一个id:
{% if lead.is_active %}
<input id="myradio" type="radio" value="" checked>
{% else %}
<input id="myradio" type="radio" value="" >
{% endif %}
使用 JQuery 检查单选按钮:
$("#myradio").prop("checked", true)
取消勾选:
$("#myradio").prop("checked", false)
所以 javascript 函数将是这样的:
<script>
function active_consumer(id) {
data = {
'pk':id,
'csrfmiddlewaretoken' : '{{csrf_token}}' };
$.post( "{% url 'active_consumer' %}", data).done(function(response) {
if (response.code == 200) {
if (response.status == "active") {
//uncheck the radio button
$("#myradio").prop("checked", false)
}
else {
//check the radio button
$("#myradio").prop("checked", true)
}
}
});
}
</script>
关于javascript - 在不重新加载页面的情况下在 html 模板中发送响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41046838/