DJANGO将AJAX请求中的新结果值呈现到HTML页面 [英] DJANGO render new result values from AJAX request to HTML page
问题描述
最近几天,我试图在后端使用AJAX和django学习表单提交.
in the last days i trying to learn form submission using AJAX and django in backend.
我可以在django views.py(validate_number
)(工作)中使用AJAX成功地获取输入值,请按照以下
I can take successfully form inputs values using AJAX in django views.py (validate_number
) (working) follow this example .
in this views.py validate_number
i calculate NEW sum of numbers and i want this sum value to render back to html page,but i don't know how to do.
任何想法如何将AJAX请求的结果呈现回html页面?
any idea how to render results from AJAX request back to html page ?
此处是代码
html形式:
<form id="form" action='' data-validate-number-url="{% url 'validate_number' %}" method="POST" enctype="multipart/form-data">{% csrf_token %}
<div class="form-group col-md-6">
Select the C Raster Dataset:<br>
<select name="CC" class="form-control" id="CC">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
Select the P:<br>
<select name="PP" class="form-control" id="PP">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
Select the F:<br>
<select name="FF" class="form-control" id="FF">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
</div>
<button type="button" class="btn btn-primary next-step1">Save and continue</button>
<p>{{sum}}</p>
Select the GG:<br>
<select name="G" class="form-control" id="GG">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
Select the JJ:<br>
<select name="JJ" class="form-control" id="JJ">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<button type="button" class="btn btn-primary next-step">Save and continue</button>
Select the FINAL:<br>
<select name="FINAL" class="form-control" id="FINAL">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="10">ten</option>
</select>
<button type="submit" class="btn btn-primary">Save</button>
</form>
AJAX
$(".next-step1").click(function (e) {
var form = $(this).closest("form");
var number1 = $("#CC").val();
var number2 = $("#PP").val();
$.ajax({
url: form.attr("data-validate-number-url"),
data: {
'number1': number1,
'number2':number2
},
dataType: 'json',
success: function (data) {
}
});
urls.py:
url(r'^details/(?P<slug>[^\.]+)/$', views.blog_details, name='blog_details'),
url(r'^ajax/validate_number/$', views.validate_number, name='validate_number'),
views.py
def blog_details(request,slug):
posts=mymodel.objects.all()
post=get_object_or_404(posts, slug_title=slug)
return render(request,'index.html',{'post':post})
def validate_number(request):
number1 = request.GET.get('number1', None)
print number1
number2 = request.GET.get('number2', None)
print number2
sum=int(number1)+int(number2)
return JsonResponse(sum)
推荐答案
在您的AJAX成功块中,您必须告诉它您希望它如何处理这些信息:
In your AJAX success block, you have to tell it what you want it to do with the information:
$(".next-step1").click(function (e) {
var form = $(this).closest("form");
var number1 = $("#CC").val();
var number2 = $("#PP").val();
$.ajax({
url: form.attr("data-validate-number-url"),
data: {
'number1': number1,
'number2':number2
},
dataType: 'json',
success: function (data) {
// 'data' is the dictionary received from the view.
// You could call it whatever you want.
$('#sum).html(data.sum_json);
/* Find 'id="sum"' and replace what's inside the tags(or innerHTML)
with the dictionary value of 'sum_json'.
If other keys exist in the 'data' dictionary,
they are accessed the same way, as in 'data.sum_json_2'.
*/
}
});
index.html
index.html
<form id="form" action='' data-validate-number-url="{% url 'validate_number' %}" method="POST" enctype="multipart/form-data">{% csrf_token %}
<div class="form-group col-md-6">
Select the C Raster Dataset:<br>
<select name="CC" class="form-control" id="CC">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
Select the P:<br>
<select name="PP" class="form-control" id="PP">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
Select the F:<br>
<select name="FF" class="form-control" id="FF">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
</div>
<button type="button" class="btn btn-primary next-step1">Save and continue</button>
<p id="sum"></p>
Select the GG:<br>
<select name="G" class="form-control" id="GG">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
Select the JJ:<br>
<select name="JJ" class="form-control" id="JJ">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<button type="button" class="btn btn-primary next-step">Save and continue</button>
Select the FINAL:<br>
<select name="FINAL" class="form-control" id="FINAL">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="10">ten</option>
</select>
<button type="submit" class="btn btn-primary">Save</button>
</form>
视图
def blog_details(request,slug):
posts=mymodel.objects.all()
post=get_object_or_404(posts, slug_title=slug)
return render(request,'index.html',{'post':post})
def validate_number(request):
# You had request.GET, but your form method is POST.
number1 = request.POST.get('number1', None)
print number1
number2 = request.POST.get('number2', None)
print number2
sum=int(number1)+int(number2)
# render a template with the given key: value to be sent to AJAX.
sum_json = render_to_string('sum_template.html', {'sum': sum})
"""
Assuming the information for sum_2 etc. uses the same format,
we can use the same template
"""
sum_json_2 = render_to_string('sum_template.html', {'sum': sum_2})
# Send the dictionary to AJAX. This is what we called 'data'.
return JsonResponse({'sum_json': sum_json, 'sum_json_2': sum_json_2})
这是我们render_to_string
发送到AJAX的模板.它以与render
相同的方式呈现模板.
This is the template that we render_to_string
to send to the AJAX. It renders templates the same way render
does.
sum_template.html
sum_template.html
{{ sum }}
您不想render_to_string
index.html
,因为您将整个index
模板插入了<p>
内,而不仅仅是sum
.您可能还想在视图中添加if
语句
You do not want to render_to_string
index.html
because you insert the whole index
template inside the <p>
, not just sum
. You probably also want to add an if
statement to your view
if request.is_ajax() and request.POST:
过滤掉非AJAX请求.
to filter out the non-AJAX requests.
有人告诉我,有更好的方法可以做到这一点.我只是自己弄清楚这一切,不知道它们是什么.如果您需要更多详细信息,请告诉我.
I've been told there are better ways to do it. I just figured all this out myself, and don't know what they are. If you need more detail let me know.
这篇关于DJANGO将AJAX请求中的新结果值呈现到HTML页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!