如何通過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 %}