Ajax傳遞json資料簡介和乙個需要注意的小問題

ajax操作與json資料格式在實際中的運用十分廣泛，本文為大家介紹乙個兩者相結合的小案例：

專案結構

路由——我們在全域性的urls.py檔案中加入乙個index路由：

from django.contrib import admin
from django.urls import path,re_path
urlpatterns = [
path('admin/', admin.site.urls),
re_path('^index/$',views.index ),
]

檢視函式——檢視函式中定義乙個名為index的函式：

from django.shortcuts import render,httpresponse
def index(request):
if request.method == 'post':
#請求報文中的請求體
print('body:',request.body)
#當contenttype為urlencoded的時候，request.post才有值

這裡需要注意一下，windows中，在templates包中加入index.html檔案之前需要在全域性的settings.py檔案中的templates列表裡的dirs改成下面這個列表而不是預設的空列表：

[os.path.join(base_dir,'templates')]

然後，我們在templates包中加入index.html檔案。

在裡面加乙個button：

js的**如下：

$('#btn').click(function () ),
success:function (data) 
})});

過程詳解

在檢視函式中，我們列印兩個資料:request.body與request.post，需要注意：request.post僅有在contenttype為urlencoded的時候才有值，如果前端傳遞的資料格式為json的時候只能在request.body中看到資料。檢視函式中列印的結果如下：

我們在瀏覽器中的network中可以檢視到contenttype的值為json:

乙個小問題

在前端部分，如果我們把input的type由button改為submit的話，上面的結果會出現下面的結果：

上面可以看到，我們的檢視函式將body與post結果列印了兩次，而且contenttype的值竟然變成了urlencoded！

這是因為submit會自動提交一次，而且「結果」會有異常：明明瀏覽器中的contenttype的值變成了urlencoded，但是post仍然列印不出來值！

因此，如果表單在點選提交按鈕後需要用js進行處理（包括輸入驗證）後再提交的話，通常都必須把submit改成button，即取消其自動提交的行為，否則，將會造成提交兩次的效果！

關於submit和button的區別這裡**其他作者的一篇文章供大家查閱：

將資料傳給前端

當然，如果我們想將資料傳給前端，可以加一條input，然後在js中這樣寫即可：

$('#btn').click(function () 
})})

效果如下：

Ajax傳遞json資料簡介和乙個需要注意的小問題

Ajax傳遞json資料

Ajax傳遞json資料

Ajax中使用Json傳遞資料

相關推薦