更新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中重新加载页面

回答

相关问题