如何在不刷新页面的情况下在页面中添加信息?

时间:2019-07-21 05:51:13

标签: django

我想在django应用程序中创建一个页面,该页面上有一个搜索产品的按钮,并且在选择了数量之后(无需重新加载)将页面添加到该页面中,列表中计算出的总数为(something like that),我是编程的初学者,我有一个星期的阅读时间,研究了如何进行编程,但没有发现任何东西。 是因为您需要其他编程lenguaje吗?或者您可以给我指出一些我可以阅读的文档或示例。主要是因为我的经验不足,所以我不知道如何识别文档中的相关信息,甚至不知道要查找什么。

1 个答案:

答案 0 :(得分:1)

这可以通过Ajax调用来完成,

检查此示例:

forms.py

class sampleForm(forms.Form):
   input = forms.CharField()

views.py

from django.http import JsonResponse

def sampleview(request):
   input = request.POST.get('input', None)
   #perform your logic here
   #let us say your data is in variable result
   result = {'product1' : 'python' ,'product2' : 'django' , 'product3' : 'ajax'  }
   return JsonResponse(result)

urls.py

from django.urls import path, include
from . import views

urlpatterns = [
    path('sampleview',views.sampleview,name='sampleview'),
]

您的HTML

    <form method="POST">
            {% csrf_token %}
            {{form.as_p}}
            <button id="sampleform-submit" type="submit">submit</button>
    </form>
    <div id="results"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script>

    $("#sampleform-submt").click(function(){
        e.preventDefault();
        var form = $('#id_input').closest("form")
        //id_input is id of input tag generated by form and above line selects the form
        $.ajax({
            url : "{% url 'sampleview' %}",
            type: "POST",
            data : form.serialize(),
            dataType: 'json',
            success: function(data){
                #data is 'result' you return in sampleview function
                $("#results").append('<p> '+ data.product1 +'</p>');
                $("#results").append('<p> '+ data.product2 +'</p>');
                $("#results").append('<p> '+ data.product3 +'</p>');                                         
            }
        });
    }      
    </script>

我希望这对您有帮助