Javascript 使用django以html发布和打印一个非常简单的ajax_Javascript_Jquery_Html_Ajax_Django

Javascript 使用django以html发布和打印一个非常简单的ajax

javascript jquery html ajax django

Javascript 使用django以html发布和打印一个非常简单的ajax,javascript,jquery,html,ajax,django,Javascript,Jquery,Html,Ajax,Django,我想在文本框中输入数字，并获得所有偶数。我知道这甚至可以通过javascript实现，但我想通过djano学习ajax。这是我的观点 load_模板 @csrf_exempt def load_template(request): if request.method == 'POST': num1 = request.POST['txt1'] even_num = [] for n in range(1, int(num1)+1)

我想在文本框中输入数字，并获得所有偶数。我知道这甚至可以通过javascript实现，但我想通过djano学习ajax。这是我的观点

load_模板

@csrf_exempt
def load_template(request):


    if request.method == 'POST':

        num1 =  request.POST['txt1']
        even_num = []

        for n in range(1, int(num1)+1):
             t = n%2
             if t == 0:
                  even_num.append(n)


         return HttpResponse(json.dumps(even_num) , content_type="application/json")

    else :

         return render (request , 'alongjs/index.html')

我的

index.html

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/html">
    <body>

    <p> Even numbers </p>

    <!-- <form action="/jsdemo/alongjs/" method="post"> -->

    <form method='post' id ='test'>

         <input type="text" name="txt1"> </input>
         <input type='submit' value='Test button'/>

        <div id = 'message'>Answer: </div>


    </form>


    <script>


        $(document).ready(function() {

            var mes = document.getElementById('message');

           $("#test").submit(function(event){
                $.ajax({

                     type:"POST",
                     url:"/jsdemo/alongjs/",
                     data: {},
                     success: function(data){
                         mes.value = data
                     }
                });
                return false;
           });

        });

    </script>

    </body>
    </html>

   {% for num in even_nums %}
        {% num %}
   {% endfor %}

我是ajax新手，我知道我的

ajax帖子

不正确，请给出建议

尝试插入event.preventDefault（）；在ajax调用之前。谢谢，我的大部分工作都在进行中，在返回json值之后，如何使用for循环将其填充为列表。好的，我已经发布了回复作为答案。

$(document).ready(function() {

    var mes = $('#message');

    $("#test").submit(function(event){

        event.preventDefault(); 

        $.ajax({
            type:"POST",
            url:"/jsdemo/alongjs/",
            data: {},
            success: function(data){
                $.each(data, function(i, s){
                    $(mes).append(" " + s);
                });
            }
        });
        return false;
    });
});