欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Django中數(shù)據(jù)在前后端傳遞的方式之表單、JSON與ajax

 更新時間:2022年10月26日 10:53:08   作者:天行健·  
Django從后臺往前臺傳遞數(shù)據(jù)時有多種方法可以實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于Django中數(shù)據(jù)在前后端傳遞的方式之表單、JSON與ajax的相關(guān)資料,需要的朋友可以參考下

前言

最近用Django寫項目的時候用到了數(shù)據(jù)的傳遞,一竅不通,查了點資料。記錄一下。水平不高,瓜不保熟。

 從兩方面來說:從后端傳遞給前端頁面、以及從前端頁面的輸入數(shù)據(jù)傳給后端

先說簡單的:

1、從后端到頁面、也就是view文件到傳遞給HTML展示出來

以Django框架為例,views里有個函數(shù)叫test_view 他作為后端函數(shù)向瀏覽器發(fā)送 test_view.html展示給用戶。

# /views
def test_view(request):
    python_data = "python里的數(shù)據(jù)"
    return render(request, "test_view.html", {"html_data_name":python_data})

render的第三個參數(shù)就是傳進去的數(shù)據(jù)

那么,怎么獲取呢。html 文件里:雙大括號擴住數(shù)據(jù)名

<!--/test_view.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
	<p>數(shù)據(jù)讀?。簕{html_data_name}}</p>
</body>
</html>

2、從頁面到后端、也就是HTML文件到views文件

通過表單傳給后端:在HTML里建一個表單,這是一種HTML內(nèi)置的獲取、提交數(shù)據(jù)的方法。 表單里action=""意為把數(shù)據(jù)傳給自己頁面的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得到表單數(shù)據(jù){data_from_html}')
    python_data = "python里的數(shù)據(jù)"
    return render(request, "test_view.html", {"html_data_name":python_data})

以上代碼的修改在于增加了個判斷。判斷request.method 是否為POST。當表單提交的時候就會重新調(diào)用了一次test_view,并且request里包含著表單的內(nèi)容,方法為post。

這就會進入判斷,通過request.POST.getrequest里的數(shù)據(jù)取出。

以上這兩種有很大缺陷,每次傳遞都是一次刷新,不適用于大量數(shù)據(jù)。比如網(wǎng)頁需要根據(jù)數(shù)據(jù)實時更新畫面之類的。那就不大行了

復雜一點的 Ajax 與 JSON

可以簡單理解為:

  • Ajax 是一個不用刷新就能傳輸數(shù)據(jù)的玩意兒,而且這個玩意不是單方向的,它既能頁面?zhèn)鹘o后端,也能后端傳給頁面。而且你運行一次他就給你傳一次。
  • JSON 是一種數(shù)據(jù)格式,在python里一個字典的變量,你把它傳到HTML的JavaScript里它還像字典一樣使用。其實就是方便傳輸。

JSON

在Django中,使用JSON由后端傳輸數(shù)據(jù)給前端,有兩種方式,一種是使用Python的JSON包,一種是使用Django的JsonResponse

# views.py 發(fā)送
 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發(fā)送給后端,只是需要放到表單里提交:

<!--/test_view.html -->
 
<!--假設(shè)你有一個JSON數(shù)據(jù)要先把他轉(zhuǎn)為字符串 -->
<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格式的字符串轉(zhuǎn)化成JSON對象(JS對象值)的過程。也稱為「反序列化」。

「序列化」:就是說把原來是對象的類型轉(zhuǎn)換成字符串類型(或者更確切的說是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":"你想發(fā)給url的數(shù)據(jù)"} //教程里沒給url發(fā)數(shù)據(jù)
    url:"訪問這個url后,對應views發(fā)過來的數(shù)據(jù)就是下面的data_get",
    success:function(data_get){
      $("#div1").html(data_get); //用得到的數(shù)據(jù)替換掉id="div1"的div里的那句話
    }});
  });
});
</script>
</head>
<body>
 
<div id="div1"><h2>在ajax訪問成功后將這里的數(shù)據(jù)變成ajax得到的數(shù)據(jù)</h2></div>
<button>使用ajax</button>
 
</body>
</html>

整體流程就是:點擊按鈕->觸發(fā)了對應函數(shù)->ajax啟動:此時ajax將data里的數(shù)據(jù)傳給了url(教程里沒傳,但可以傳)并訪問、觸發(fā)了url對應views里的視圖(后端)、并且后端返回了數(shù)據(jù)被ajax放到了success:function()的參數(shù)里、運行了這個函數(shù)-> html內(nèi)容被改變。

ajax的主要字段:

  • data: 傳給后端的數(shù)據(jù)
  • url: 傳給哪個后端處理函數(shù)
  • success:得到數(shù)據(jù)后要這些數(shù)據(jù)干啥

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傳表單數(shù)據(jù)時也要帶上
    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里的數(shù)據(jù)
        success: function (data) { //data為地址傳過來的數(shù)據(jù)
            //在此對data進行操作
            }
        };
    });
  });
});
 
</script>
</head>
<body>
 
<div id="div1"><h2>使用 jQuery AJAX 修改文本內(nèi)容</h2></div>
<button>獲取其他內(nèi)容</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函數(shù)
    # return JsonResponse(data)

總結(jié)

到此這篇關(guān)于Django中數(shù)據(jù)在前后端傳遞的方式之表單、JSON與ajax的文章就介紹到這了,更多相關(guān)Django數(shù)據(jù)在前后端傳遞方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • python實現(xiàn)TCP文件接收發(fā)送

    python實現(xiàn)TCP文件接收發(fā)送

    這篇文章主要為大家詳細介紹了python實現(xiàn)TCP文件接收發(fā)送,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • python json.loads兼容單引號數(shù)據(jù)的方法

    python json.loads兼容單引號數(shù)據(jù)的方法

    今天小編就為大家分享一篇python json.loads兼容單引號數(shù)據(jù)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-12-12
  • pycharm中使用request和Pytest進行接口測試的方法

    pycharm中使用request和Pytest進行接口測試的方法

    這篇文章主要介紹了pycharm中使用request和Pytest進行接口測試的方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-07-07
  • python 模擬登陸github的示例

    python 模擬登陸github的示例

    這篇文章主要介紹了python 模擬登陸github的示例代碼,幫助大家更好的理解和學習python 爬蟲的相關(guān)知識,感興趣的朋友可以了解下
    2020-12-12
  • python3實現(xiàn)指定目錄下文件sha256及文件大小統(tǒng)計

    python3實現(xiàn)指定目錄下文件sha256及文件大小統(tǒng)計

    這篇文章主要為大家詳細介紹了python3實現(xiàn)指定目錄下文件sha256及文件大小統(tǒng)計,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-02-02
  • python繪制二維直方圖的代碼實現(xiàn)

    python繪制二維直方圖的代碼實現(xiàn)

    本文主要介紹了python繪制二維直方圖的代碼實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-07-07
  • Python 處理圖片像素點的實例

    Python 處理圖片像素點的實例

    今天小編就為大家分享一篇Python 處理圖片像素點的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-01-01
  • 磁盤垃圾文件清理器python代碼實現(xiàn)

    磁盤垃圾文件清理器python代碼實現(xiàn)

    幾行Python代碼打造自己的磁盤垃圾文件清理器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-03-03
  • python字符串常用方法及文件簡單讀寫的操作方法

    python字符串常用方法及文件簡單讀寫的操作方法

    字符串(sting)是 Python 中最常用的數(shù)據(jù)類型。我們可以使用引號('或")來創(chuàng)建字符。本文給大家介紹python字符串常用方法及文件簡單讀寫的操作方法,通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2020-03-03
  • 利用Python實現(xiàn)手機短信監(jiān)控通知的方法

    利用Python實現(xiàn)手機短信監(jiān)控通知的方法

    今天小編就為大家分享一篇利用Python實現(xiàn)手機短信監(jiān)控通知的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-07-07

最新評論