Djangoのビューで特定のURLに結びついていないフォームを処理する方法は？

Question

私は仕事ボードサイトを作成していますし、私は以下のurls.py（その重要なだけでなく、問題をより明確にするためにそれらを含む）持っている：私はすべてに含まれているbase.htmlを持って

urlpatterns = [ 
    url(r'^admin/', admin.site.urls), 

    url(r'^$', views.index, name = "index"), 

    url(r'^job_info/(?P<job_id>[0-9]+)/$', views.job_info , name = "job_info"), 

    url(r'^employer_signup', views.employer_signup, name="employer_signup"), 

    url(r'^employer_home', views.employer_home, name = "employer_home"), 

    url(r'^login/$', login, {'template_name':'core/employer_login.html'}, name = 'employer_login'), 
] 

をHTMLファイル。これには、インライン検索バーを含むNavbarが含まれます。

<form class="form-inline my-2 my-lg-0 navbar-toggler-right" method = "post" > 
     {% csrf_token %} 
     <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
</form> 

ビューでこのフォームを処理する方法はありますか？特定のURLに直接結びついていないので？

Answer 1

ええ、すべての問題のための方法が常にあります。

AJAXについて聞いたことがありますか？

フォームの提出は、AJAXコールのPOSTリクエストを使用してフォームを送信することができます。ここで私は、AJAXリクエストから値を取得し、それを印刷する単純なビューを書かれているか

views.py

で、あなたはあなたの必要性に応じて変更することができます。ここで

from django.shortcuts import render 
from django.http import HttpResponse 
import json 

def NavbarForm(request): 
    if request.method == "POST" and request.is_ajax(): 
     json_dict = json.loads(request.body.decode('utf-8')) 
     input_value = json_dict['input_value'] 

     print(input_value) 

     return HttpResponse(json.dumps({"status": 1}), content_type='application/json') 

    return HttpResponse(json.dumps({"status": 0}), content_type='application/json') 

def Index(request): 
    return render(request, "index.html", {}) 

urls.py

from .views import NavbarForm, Index 

urlpatterns += [ 
    url(r'^$', Index, name = "index"), 
    url(r'^ajax/navbar_form/submit$', NavbarForm) 
] 

テンプレート/ base.html

あなたが形成するために、 "ID" を追加するようないくつかの変更を行っている同じHTMLの一部であり、入力（それに応じて変更）

<form class="form-inline my-2 my-lg-0 navbar-toggler-right" method = "post" id = "navbar_form"> 
     {% csrf_token %} 
     <input class="form-control mr-sm-2" type="text" placeholder="Search" id = "input_value"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
</form> 

テンプレート/ここbase.html

は答えの主なCRUXで、jQueryのAJAXでのコードは、詳細については、公式ドキュメントhttps://docs.djangoproject.com/en/1.11/ref/csrf/#ajax action属性なし

<script type="text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript"> 
//GENERATE CSRF TOKEN 
function getCookie(name) { 
    var cookieValue = null; 
    if (document.cookie && document.cookie != '') { 
     var cookies = document.cookie.split(';'); 
     for (var i = 0; i < cookies.length; i++) { 
      var cookie = jQuery.trim(cookies[i]); 
      // Does this cookie string begin with the name we want? 
      if (cookie.substring(0, name.length + 1) == (name + '=')) { 
       cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
       break; 
      } 
     } 
    } 
    return cookieValue; 
} 
var csrftoken = getCookie('csrftoken'); 
function csrfSafeMethod(method) { 
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); 
} 
$.ajaxSetup({ 
    beforeSend: function(xhr, settings) { 
     if (!csrfSafeMethod(settings.type) && !this.crossDomain) { 
      xhr.setRequestHeader("X-CSRFToken", csrftoken); 
     } 
    } 
}); 


$(document).ready(function(){ 
    $("#navbar_form").submit(function(e){ 
     e.preventDefault(); 
     var input_value = $("#input_value").val(); 
     var data = {"csrftoken": csrftoken, "input_value": input_value}; 
     data = JSON.stringify(data) 
     $.ajax({ 
      type : 'POST', 
      contentType: "application/json; charset=utf-8", 
      url : "/ajax/navbar_form/submit", 
      datatype : 'json', 
      data : data, 

      success : function(data){ 
       if(data.status == 1){ 
        $("#input_value").val(""); 
        alert("Form submitted"); 
       } 
      }, 
      error : function(data){ 
       console.log(data); 
      } 
     }); 

    }) 
}) 


</script>