2016-06-22 12 views
0

テンプレートファイルにいくつかのチェックボックスフィールドがあります。チェックされた値はビューファイルに送信する必要があります。私はページの再読み込みを防ぐためにajaxを使用しました。これらのデータをバックエンド(views.py)に送信する方法は?djangoでajaxを使ってテンプレートファイルからデータを受け取る方法は?

マイテンプレートファイル、

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#myform").submit(function(event) { 
     event.preventDefault(); 
     var category = []; 
     $('input[type="checkbox"]:checked').each(function(i){ 
      category[i] = $(this).val(); 
      }); 

     $.ajax({ 
      url :'/welcome_user/', 
      type : "GET", 
      data : { 
       category_name : category, 
      }, 
      success : function() { 
       console.log('Success'); 
      }, 
      error : function() { 
       console.log('Failure'); 
      } 
     }); 
    }) 
}); 
</script> 
</head> 
<body> 
    <form id="myform"> 
     <p>Categories</p> 
     {% for i in My_Cat %} 
      <input id="category_id" name="category_name" type="checkbox" 
      value="{{i.category}}" >{{i.category}}<br> 
     {% endfor %} 
     <input id="submit" type="button" value="Go"/> 
    </form> 
</body> 

views.py、私はそれがit.Thisを認識していない2つのチェックボックスをチェックする任意のerror.Ifを取得していない午前

def welcome_user(request): 
    categories = Add_cat.objects.all() 

    if 'category_name' not in request.GET: 
     my_products = Add_prod.objects.all() 
     context = { 
       "My_Cat":categories, 
       "products":my_products  
     } 
     if request.is_ajax(): 
      print "Hello world" 
      print request.GET.get('category_name') #getting undefined 


    if 'category_name' in request.GET: 
     filter_category = request.GET.getlist('category_name') 
     my_products = Add_prod.objects.filter(cat__category__in = filter_category) 

     context = { 
       "My_Cat":categories, 
       "products":my_products  
     }  
    return render(request,"welcome-user.html",context) 

は、私が見たものです私のコンソール。

"GET /welcome_user/?category_name%5B%5D=Economics&category_name%5B%5D=Kids HTTP/1.1" 200 5743

答えて

0

は物事を混在しないようにしてください。 ajaxで何かを送信したい場合は、submitの入力を使わないでください。

用途:

<input id="submit" type="button" value="Go"/> 

の代わり:あなたのJSで

<input type="submit" value="Go"/> 

、その後: $("#submit").click(function(event) { ... });

更新

再びすべてを読んで、私はそこにある参照ここで多くの誤解。ビュー用とajaxリクエスト用の2つの関数を持つことをお勧めします。私はまたあなたが本当にajaxを使用したいかどうか疑問に思っています。その場合は、tutorial、または通常のsubmissionで始める必要があります。

+0

ビューファイルで何かを変更する必要がありますか? – Bhanukiran

+0

はい、回答を更新します – dnaranjo

+0

チュートリアルでは、データの保存と送信にjsonを使用しています。私はajaxを使用したい場合、ビューファイルでjsonを強制的に使用しますか? – Bhanukiran

関連する問題