更新DOM，無需在Django中重新加載頁面

我在DOM中有兩個選取列表，首先在視圖中的方法加載頁面時加載URL期間填充。第二個選項列表的內容取決於用戶在第一個選項列表中選擇的內容。當用戶在第一個選擇列表中進行選擇，在python中進行一些操作，返回一個我想在第二個選擇列表中顯示的值的列表，然後在不刷新頁面的情況下填充它，如何將python方法綁定到事件？更新DOM，無需在Django中重新加載頁面

我的模板看起來是這樣的：

{% block content %} 

{% if list_of_events %} 
    <form> 
     <select> 
      {% for event in list_of_events %} 
       <option value="name">{{ event.module }}</option> 
      {% endfor %} 
     </select> 
    </form> 

{% else %} 
    <p>No events available now.</p> 
{% endif %}

下一頁條件等應當返還用戶選擇在第一選擇列表中的數值後到模板first_selection說法。

{% if first_selection %} 
    <form> 
     <select> 
      {% for room in list_of_rooms %} 
       <option value="name">{{ room.id }}</option> 
      {% endfor %} 
     </select> 
    </form> 
{% endif %} 

<input type="submit" value="Submit"> 

{% endblock %}

我views.py方法是這樣的：

def events(request): 
try: 
    list_of_events = Event.objects.all() 
except: 
    raise Http404('Something\'s wrong with events page loader') 
return render(request, 'web_service/schedule.html', { 
    'list_of_events': list_of_events 

})

來源

2017-08-27 Stan Redoute

你有沒有考慮阿賈克斯？ – Reza

您只能重新填充頁面而無需使用Javascript重新載入頁面。儘管你可以用Python返回所需的數據，但它不能用Python完成。 AJAX上有很多教程。 –

不幸的是我並不熟悉它，但是我在Angular4中有經驗，所以我正在尋找一些相似之處。可以簡單地將打字稿方法綁定到onClick事件，DOM將自動更新而不刷新頁面。 –

在Django（至少現在）沒有目錄ect方式從模板（html）直接調用python方法，無需刷新頁面。

要調用python方法，並看到它在模板中的效果，無需刷新JS代碼是需要和AJAX調用。這並不像在OOP中調用實例方法那麼簡單，但並不像看起來那麼困難。

下面的代碼演示瞭如何響應按鈕click並將一些數據發送到python方法，然後將其返回到模板而不刷新DOM。

從模板中調用python代碼的唯一方法與我們涉及url的方法相關，這意味着我們必須在urls.py中創建新的url pattern。然後在views.py中調用必要的方法並返回對模板的響應，但不是作爲render，而是返回JsonResponse。

注意：請務必在<body>標籤的內部底部導入jquery。

首先，我們需要創建方法，它將處理按鈕點擊並創建AJAX請求連接到響應方法的url。 AJAX request將'input'作爲參數傳遞給我們的url模式，這意味着python方法。如果從views.py收到回覆，則調用方法調用成功，並且數據正在解包。

比方說，我們的模板看起來是這樣的：

{% block content %} 

    <input type="text" id=「user_input」 autofocus=""><br> 
    <button type="button" id=「sender」>Send data</button><br> 
    <p id="pText">Click me!</p> 

{% endblock %}

腳本處理的點擊和要求如下：需要在URL中

<script> 

$("#sender").click(function() { 
    var input = $(this).val(); 

    $.ajax({ 
     url: '{% url 'get_response' %}', 
     data: { 
      'input_value': input 
     }, 
     dataType: 'json', 
     success: function (data) { 
      document.getElementById('pText').innerHTML = value; 
     } 
     }); 
    }); 

</script>

新格局。潘岳：

urlpatterns = [ 
    ... 
    url(r'^ajax/get_response/$', views.answer_me, name='get_response') 
    ... 
]

最後一步是添加在views.py響應蟒蛇方法，串聯用於測試目的我們的輸入並返回到模板：

def answer_me(request): 
    field = request.GET.get('input_value') 
    answer = 'You typed: ' + field 

    data = { 
     'respond': answer 
      } 
    return JsonResponse(data)

來源

2017-08-29 13:46:45

可以渲染所有可能的第二選擇列表以顯示爲無，那麼你可以添加一個JavaScript這樣的：

function show(select_item) { 
     if (select_item == "apple") { 
      hiddenDiv.style.visibility='visible'; 
      hiddenDiv.style.display='block'; 
      Form.fileURL.focus(); 
     } 
     else{ 
      hiddenDiv.style.visibility='hidden'; 
      hiddenDiv.style.display='none'; 
     } 
    } 
</script> 

<form> 
<label>Fruit:</label> 
    <select name="Fruit" onchange="java_script_:show(this.options[this.selectedIndex].value)"> 
     <option value='pear'>pear</option> 
     <option value='apple'>apple</option> 
     <option value='grapes'>grapes</option> 
    </select> 

<div id='hiddenDiv' style="display: none;"> 
    <label>Are you sure you want to eat the apple?</label> 
    <select name="AppleQuestion"> 
     <option value='Yes'>Yes</option> 
     <option value='No'>No</option> 
    </select> 
</div> 
</form>

https://codepen.io/metrafull2/pen/WEgWLo請嘗試在這裏

來源

2017-08-27 16:32:19

這個解決方案與調用python方法無關，當然也不是連接到model –

，我說渲染所有可能的選項，並根據顯示的選項，比使用angular或ajax容易得多，你沒有發佈你的觀點和你的模板，所以它很難理解你想要做什麼 –

你絕對正確的在第二選擇列表的選擇範圍內，但對於第一個選擇列表中的每一個選擇，我有幾百個子選擇對於第二個選項列表，我需要將fisrt和第二個選項列表的值發回模型，所以我可能沒有其他選擇比用ajax方式。但是，感謝這個想法，我可能會在某一天使用它。 –

更新DOM，無需在Django中重新加載頁面

回答

相關問題