如何用jQuery製作Django Ajax請求？

我是新來的Ajax，並希望使用jQuery向Django中的視圖函數發出Ajax請求，但我被卡住了。如何用jQuery製作Django Ajax請求？

我開始用一個簡單的例子來檢查是否正常工作

var button = $('.any_button'); 
    $(button).click(function() { 
     var button_value = $(this).val(); 
     $.ajax({ 
      type: "POST", 
      url: "/url-path/to-my/view-function/", 
      dataType: "json", 
      data: { "button_value": button_value }, 
      beforeSend: function() { 
       alert("Before Send") 
      }, 
      success: function() { 
       alert("Success"); 
      }, 
      error: function() { 
       alert("Error") 

      } 
     }); 

    });

我從https://docs.djangoproject.com/en/1.11/ref/csrf/

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) { 
     // these HTTP methods do not require CSRF protection 
     return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); 
    } 
    $.ajaxSetup({ 
     beforeSend: function(xhr, settings) { 
      if (!csrfSafeMethod(settings.type) && !this.crossDomain) { 
       xhr.setRequestHeader("X-CSRFToken", csrftoken); 
      } 
     } 
    });

我的看法功能插入：

from django.http import JsonResponse 

def button_check(request): 
    data = {"message": "Message"} 
    return JsonResponse(data)

我url路徑是指views.button_check

我得到beforeSend alert和error alert，但我預計success alert

我錯過了什麼？不幸的是，我無法繼續前進。

jQuery中嘗試這樣

來源

2017-10-05 MK87

你能在瀏覽器中輸入url嗎？如果您在網絡選項卡中打開開發工具（Chrome中的F12），那麼錯誤是什麼？ – HMR

是的，如果我在瀏覽器中打開url，我會得到輸出{「message」：「Message」}。 – MK87

那麼在xhr請求的開發工具網絡中是否有任何錯誤？什麼是錯誤？如果它在瀏覽器中運行，那麼你應該在你的JavaScript代碼中將POST改爲GET，在瀏覽器中輸入一個url會發出GET請求。 – HMR

，

$.ajax({ 
    type: "POST", 
    url: "/button_check/", 
    method: "POST", 
    data: { "button_value": button_value }, 
    contentType: "application/json", 
    beforeSend: function() { 
     alert("Before Send") 
    }, 
    success: function() { 
     alert("Success"); 
    }, 
    error: function() { 
     alert("Error") 

    } 
});

網址應該是，

url(r'button_check/', 'views.button_check'),

如果您的請求是「POST」或特定的嘗試，

def button_check(request): 
    if request.method == "POST": 
     data = {"message": "Message"} 
     return JsonResponse(data)

來源

2017-10-05 12:18:54

這可行，但只有當我刪除'beforeSend：'函數時，因爲csrf標記使用'beforeSend：'函數。 – MK87

你ajax setup被覆蓋通過你傳遞給jQuery.ajax的值：

$.ajaxSetup({ 
    beforeSend: function(xhr, settings) { 
     //this will never happen because it is overridden later 
     alert("you will never see this."); 
    } 
    }); 
    $.ajax({ 
    type: "GET", 
    url: "/index.html", 
    beforeSend: function() { 
     console.log("another before send"); 
    }, 
    }) 
    .then(x => console.log("success:",x)) 
    .then(undefined,reject => console.error(reject));

這意味着您將不會進行身份驗證並獲取csrf標記缺失。

正如你在評論中所說的;刪除$ .ajax中的boforesend

來源

2017-10-05 13:29:59 HMR

謝謝，我已經認識到這個錯誤並已經解決。現在我收到成功警報。 – MK87

如何用jQuery製作Django Ajax請求？

回答

相關問題