Django中資料在前後端傳遞的方式之表單、JSON與ajax

2022-10-28 14:03:05

前言

最近用Django寫專案的時候用到了資料的傳遞，一竅不通，查了點資料。記錄一下。水平不高，瓜不保熟。

從兩方面來說：從後端傳遞給前端頁面、以及從前端頁面的輸入資料傳給後端

先說簡單的：

1、從後端到頁面、也就是view檔案到傳遞給HTML展示出來

以Django框架為例，views裡有個函數叫test_view 他作為後端函數向瀏覽器傳送 test_view.html展示給使用者。

# /views
def test_view(request):
    python_data = "python裡的資料"
    return render(request, "test_view.html", {"html_data_name":python_data})

render的第三個引數就是傳進去的資料

那麼，怎麼獲取呢。html 檔案裡：雙大括號擴住資料名

<!--/test_view.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
	<p>資料讀取：{{html_data_name}}</p>
</body>
</html>

2、從頁面到後端、也就是HTML檔案到views檔案

通過表單傳給後端：在HTML裡建一個表單，這是一種HTML內建的獲取、提交資料的方法。表單裡action=""意為把資料傳給自己頁面的url

<!--/test_view.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
	<form  method="post" action="">
        {% csrf_token %}
        <input type="text" name="html_data_to_views_name" value="Mickey">
        <input type="submit" value="Submit">
    </form> 
</body>
</html>

獲取方法：request.POST.get('變數名')

# /views
def test_view(request):
    if request.method == 'POST':
        data_from_html = request.POST.get('html_data_to_views_name')
        HttpResponse(f'views得到表單資料{data_from_html}')
    python_data = "python裡的資料"
    return render(request, "test_view.html", {"html_data_name":python_data})

以上程式碼的修改在於增加了個判斷。判斷request.method 是否為POST。當表單提交的時候就會重新呼叫了一次test_view，並且request裡包含著表單的內容，方法為post。

這就會進入判斷，通過request.POST.get將request裡的資料取出。

以上這兩種有很大缺陷，每次傳遞都是一次重新整理，不適用於大量資料。比如網頁需要根據資料實時更新畫面之類的。那就不大行了

複雜一點的 Ajax 與 JSON

可以簡單理解為：

Ajax 是一個不用重新整理就能傳輸資料的玩意兒，而且這個玩意不是單方向的，它既能頁面傳給後端，也能後端傳給頁面。而且你執行一次他就給你傳一次。
JSON 是一種資料格式，在python裡一個字典的變數，你把它傳到HTML的JavaScript裡它還像字典一樣使用。其實就是方便傳輸。

JSON

在Django中，使用JSON由後端傳輸資料給前端，有兩種方式，一種是使用Python的JSON包，一種是使用Django的JsonResponse

# views.py 傳送
 def test_view(request):
     data={
         'html_data_name': 'python_data',
     }
    # return HttpResponse(json.dumps(data)) # 會被識別為text/html應該是：
    return HttpResponse(json.dumps(data), content_type='application/json')
    # 或return JsonResponse(data)

<!--/test_view.html 讀取-->
<script>
var jsondata  = JSON.parse(data);//原生
</script>

同樣的也能從HTML傳送給後端，只是需要放到表單裡提交：

<!--/test_view.html -->
 
<!--假設你有一個JSON資料要先把他轉為字串 -->
<script>
JSONdata={'key':'value'}
json_str_data = JSON.stringify(JSONdata).toString();
function get_json_str(){
    var inp_id =document.getElementById("str_json_data");
    inp_id.value = json_str_data
}
</script>
 
<!--將字串放到一個隱藏的表單input裡，提交後就傳走了 -->
<form method="post" action="">
    {% csrf_token %}
    <input type="text" id="str_json_data" style="display:none" name="str_json_data">
    <button type="submmit" onclik="get_json_str()">提交</button>
</form>

# views.py 讀取
    # /views
    def test_view(request):
        if request.method == 'POST':
            json_data = json.loads(request.body) //json讀取方式
            return HttpResponse("get!")
        return render(request, "test_view.html", {})

這裡涉及到倆概念：

「解析」：將JSON格式的字串轉化成JSON物件（JS物件值）的過程。也稱為「反序列化」。

「序列化」：就是說把原來是物件的型別轉換成字串型別（或者更確切的說是JSON字串型別的）。

解析：將字串變成了Obj帶有的屬性就是字串裡顯示的。可以用點號取出。

var data = '{"name":"chunlynn" ,"age": 27, "sex": "man" ,"qq":"277539687"}'; 
 
var jsondata = $.parseJSON(data);//jQuery
var jsondata  = JSON.parse(data);//原生

序列化

var jsonstrdata = JSON.stringify(data).toString();

ajax

ajax的使用方式:

我當時沒看懂，所以在這解釋一下里面的語句都是幹嘛的：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({
    data:{"data_send":"你想發給url的資料"} //教學裡沒給url發資料
    url:"存取這個url後，對應views發過來的資料就是下面的data_get",
    success:function(data_get){
      $("#div1").html(data_get); //用得到的資料替換掉id="div1"的div裡的那句話
    }});
  });
});
</script>
</head>
<body>
 
<div id="div1"><h2>在ajax存取成功後將這裡的資料變成ajax得到的資料</h2></div>
<button>使用ajax</button>
 
</body>
</html>

整體流程就是：點選按鈕->觸發了對應函數->ajax啟動：此時ajax將data裡的資料傳給了url（教學裡沒傳，但可以傳）並存取、觸發了url對應views裡的檢視（後端）、並且後端返回了資料被ajax放到了success:function()的引數裡、執行了這個函數-> html內容被改變。

ajax的主要欄位:

data: 傳給後端的資料
url：傳給哪個後端處理常式
success：得到資料後要這些資料幹啥

Ajax+json：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">  
$(document).ready(function(){
  $("button").click(function(){
    var token_csrf = "{{ csrf_token }}";  //因為django的form表單中都包含csrf_token，因此在用ajax傳表單資料時也要帶上
    var JSON_data = { "js_data": 555 };  
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        headers: { "X-CSRFToken": token_csrf },
        url: "/testview",
        dataType: "json",
        data: JSON.stringify(JSON_data), //傳進views裡的資料
        success: function (data) { //data為地址傳過來的資料
            //在此對data進行操作
            }
        };
    });
  });
});
 
</script>
</head>
<body>
 
<div id="div1"><h2>使用 jQuery AJAX 修改文字內容</h2></div>
<button>獲取其他內容</button>
 
</body>
</html>

後端：

def post(self, request):
    data = json.loads(request.body)
 
    get_data = data["js_data"]
 
    data={
        'send_data':'send_data',
    }
    return HttpResponse(json.dumps(data),content_type="application/json")
    # 或者直接使用JsonResponse函數
    # return JsonResponse(data)

總結

到此這篇關於Django中資料在前後端傳遞的方式之表單、JSON與ajax的文章就介紹到這了,更多相關Django資料在前後端傳遞方式內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Django中資料在前後端傳遞的方式之表單、JSON與ajax

目錄

前言

先說簡單的：

複雜一點的 Ajax 與 JSON

總結

熱門文章