[英]How to send values via ajax from django template to views?
I have a select box that calls a function on changes. 我有一个选择框,它在更改时调用一个函数。 The function finds the selected value from "Products" selectbox. 该功能从“产品”选择框中找到选定的值。
I want to throw that selected value to my views.py which after some operations return the list of data and Populates the Destination's selectbox. 我想将选定的值扔到我的views.py中,在执行某些操作后,它返回数据列表并填充“目标”的选择框。
I want to use ajax for this purpose. 我想为此使用ajax。 Please help. 请帮忙。
My code looks like this: 我的代码如下所示:
<script type="text/javascript">
function select_value()
{
var e = document.getElementById("Product");
var prod = e.options[e.selectedIndex].text
console.log(prod)
}
</script>
This is what my selectbox look like: 这是我的选择框的样子:
<table>
<tr>
<td>
<select id="Product" onChange="select_value();">
{% for products in product_name_list %}
<option>{{products|safe}}</option>
{% endfor %}
</select>
</td>
<td>
<select id="dest">
{% for des in destinations_name_list %}
<option>{{des|safe}}</option>
{% endfor %}
</select>
</td>
</tr>
</table>
This is my views.py: 这是我的views.py:
def selection_filter(request,prod):
destination_objs = Destination.objects.filter(product=prod)
destination_name = destination_objs.values_list('name')
destination_name_list = []
for iter_name in destination_name:
destination_name_list.append(iter_name[0].encode('utf-8'))
return render_to_response('temp/test.html',
{"destination_name_list" : destination_name_list},
)
I think the point you might be misunderstanding is that your Django template for your whole page will not be re-rendered "magically". 我认为您可能会误解的一点是,整个页面的Django模板不会“神奇地”重新呈现。 In Django's standard model-view-template paradigm, the template is rendered just once, upon the initial request. 在Django的标准model-view-template范式中,根据最初的请求,模板仅呈现一次。 The way you've written it, unless there's a default product selection, you're going to have an awkward empty <select>
in the first render. 编写方式,除非有默认的产品选择,否则第一个渲染中将有一个笨拙的<select>
空。 But ignoring that... 但是无视...
For a problem like this, you need two views: one for rendering the whole page, and one for providing the Ajax response. 对于这样的问题,您需要两个视图:一个用于呈现整个页面,另一个用于提供Ajax响应。 There are two main options for the second view: 1) return JSON for interpretation/rendering by your script post-response or 2) return a fully rendered HTML fragment for direct insertion into your DOM. 第二个视图有两个主要选项:1)返回JSON以通过脚本后响应进行解释/渲染,或者2)返回完全渲染的HTML片段以直接插入DOM。 In this case, I'd just go for option 2. 在这种情况下,我只选择选项2。
I recommend looking into Jquery, as it makes Ajax and DOM manipulation super simple. 我建议研究Jquery,因为它使Ajax和DOM操作超级简单。
If you've got Jquery, it's as simple as adding to your script: 如果您拥有Jquery,则就像添加到脚本中一样简单:
$.get('/destinations/' + prod)
.done(function (html) {
$(#dest).html(html);
});
(You can do the same thing without Jquery too, but it requires a bit more wrangling) (您也可以在没有Jquery的情况下执行相同的操作,但是需要更多的争执)
Your test.html
file should contain: 您的test.html
文件应包含:
{% for des in destinations_name_list %}
<option>{{des|safe}}</option>
{% endfor %}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.