2014-07-03 66 views
0

我想輸入一個文本框中的數字,我想要得到所有的偶數。我知道這甚至可以使用JavaScript來實現,但我想用djano學習ajax。因此,這裏是我的看法一個非常簡單的ajax後,並打印在Django的HTML

load_template

@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> 

我想要的答案進來Answer :div。但頁面正在刷新。

in index.html

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

我是新來的AJAX和我知道我的ajax post是不對的,請諮詢:

以及如何在使用上述方法使用以下格式的HTML渲染頁面。

+1

嘗試插入event.preventDefault();在Ajax調用之前。 –

+0

謝謝,我的大部分工作正在進行中,如何在返回json值之後使用for循環將其填充爲列表。 – rakesh

+0

好吧,我已發佈回覆作爲答案。 –

回答

0
$(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; 
    }); 
});