![](/img/trans.png)
[英]Retun data from a Django view after a javascript AJAX POST request
[英]How to to access Ajax POST request from Javascript in Django
我正在從Javascript模式向Django發送Ajax POST請求。 正確包含了csrf令牌(經過很多頭痛之后……),但是由於任何原因,我都無法在views.py中“獲取”請求數據。 我在代碼中添加了一些注釋,以指示似乎可行的方法
我一直在閱讀可以找到的所有內容,但仍然找不到錯誤,因此非常感謝任何輸入。 謝謝!
function getMenuItem(id){
console.log(id); // menuitem id prints correctly
// Open request to get menuitem
const request = new XMLHttpRequest();
request.open('POST', '/menuitem');
// Include csrf token in header so Django will accept the request
const header = "X-CSRFToken"
const token = Cookies.get('csrftoken'); // Using the js-cookie library
console.log(token); // token prints correctly
request.setRequestHeader(header, token);
// Send request
request.send(id);
//Once request is received parse it and insert result in DOM
request.onload = () => {
const received = request.responseText;
console.log(received); // Prints the debug message from Django
const parsed = JSON.parse(received);
document.getElementById('menuItem').innerHTML = parsed;
};
};
def menuitem(request):
if request.method == 'POST':
id = request.body # I have also tried HttpRequest.body
print(id) # Does not print
menuitem = MenuConfiguration.objects.filter(id=id).all()
menuitem = serializers.serialize('json', menuitem)
menuitem = json.loads(menuitem)
return menuitem
Traceback (most recent call last):
File "/Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/site-packages/django/core/handlers/exception.py", line 34, in inner
response = get_response(request)
File "/Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/site-packages/django/utils/deprecation.py", line 93, in __call__
response = self.process_response(request, response)
File "/Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/site-packages/django/middleware/clickjacking.py", line 26, in process_response
if response.get('X-Frame-Options') is not None:
AttributeError: 'list' object has no attribute 'get'
[11/Apr/2019 06:10:18] "POST /menuitem HTTP/1.1" 500 54835
這里有幾件事要解決。
在Javascript代碼中,您應該使用key=val
語法發送正確編碼為表單參數的id值:
request.send("id=" + id);
然后在您的視圖中,您應該從POST
字典中檢索值:
if request.method == 'POST':
id = POST['id'] # Retrieve the value of the id parameter
最后,您的視圖必須返回HttpResponse
。 由於您要返回JSON,因此應將其傳遞給HttpResponse
並將content_type
參數設置為application/json
:
if request.method == 'POST':
id = POST['id']
menuitem = MenuConfiguration.objects.filter(id=id).all()
data = serializers.serialize('json', menuitem)
# Return a HttpResponse containing the JSON data
return HttpResponse(data, content_type='application/json')
我通過以下調整使其工作,因此現在請求已正確發送並由Django處理,並且查詢結果由JS接收。 為了使JSON.parse能夠處理它,我不得不進行一些改動,從響應文本對象中刪除[]。
我有一個新問題,那就是; 獲取查詢中包含的外鍵的值(即不僅是現在的鍵)。 我將對此發布一個單獨的問題,但是如果您對此有解決方案,請發表評論
function getMenuItem(id){
console.log(id);
// Open request to get menuitem
const request = new XMLHttpRequest();
request.open('POST', '/menuitem');
// Include csrf token in header so Django will accept the request
const header = "X-CSRFToken";
const token = Cookies.get('csrftoken'); //Using the js-cookies library
request.setRequestHeader(header, token);
// Formdata object to structure data as if submitted from a form
const data = new FormData();
data.append('id', id);
// Send request
request.send(data);
console.log("Request sent");
//Once request is received parse it and insert result in DOM
request.onload = () => {
const received = request.responseText;
console.log("Data as received: " + received);
// Remove [] from response text
removedfirst = received.substring(1);
removedlast = removedfirst.substring(0, removedfirst.length-1);
console.log("Data with [] removed: " + removedlast);
// Parse to JS object
const parsed = JSON.parse(received);
console.log("Output of JSON.parse:");
console.log(parsed);
// Insert value into DOM
document.getElementById('outputField').innerHTML = parsed[0].fields.base;
};
};
def menuitem(request):
if request.method == 'POST':
# Get product id from request
id = request.POST.get('id')
# Retrieve data for specific product id
menuitem = MenuConfiguration.objects.filter(id=id).all()
# Turn query response into JSON
data = serializers.serialize('json', menuitem)
# Return a HttpResponse containing the JSON data
return HttpResponse(data, content_type='application/json')
JS控制台的輸出:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.