如何通过ajax从Django模板向视图发送值？

Question

我有一个选择框，它在更改时调用一个函数。 该功能从“产品”选择框中找到选定的值。
我想将选定的值扔到我的views.py中，在执行某些操作后，它返回数据列表并填充“目标”的选择框。
我想为此使用ajax。 请帮忙。

我的代码如下所示：

<script type="text/javascript">
    function select_value()
    {
        var e = document.getElementById("Product");
        var prod = e.options[e.selectedIndex].text
        console.log(prod)
    }
</script>

这是我的选择框的样子：

<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>

这是我的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},
                )

Answer 1

我认为您可能会误解的一点是，整个页面的Django模板不会“神奇地”重新呈现。 在Django的标准model-view-template范式中，根据最初的请求，模板仅呈现一次。 编写方式，除非有默认的产品选择，否则第一个渲染中将有一个笨拙的<select>空。 但是无视...

对于这样的问题，您需要两个视图：一个用于呈现整个页面，另一个用于提供Ajax响应。 第二个视图有两个主要选项：1）返回JSON以通过脚本后响应进行解释/渲染，或者2）返回完全渲染的HTML片段以直接插入DOM。 在这种情况下，我只选择选项2。

我建议研究Jquery，因为它使Ajax和DOM操作超级简单。

如果您拥有Jquery，则就像添加到脚本中一样简单：

$.get('/destinations/' + prod)
.done(function (html) {
    $(#dest).html(html);
});

（您也可以在没有Jquery的情况下执行相同的操作，但是需要更多的争执）

您的test.html文件应包含：

{% for des in destinations_name_list %}
    <option>{{des|safe}}</option>
{% endfor %}