Django如何與ajax通信

示例一

文件結構

假設你已經創建好了一個Django項目和一個App，部分結構如下：

mysite
myapp
	|___views.py
	|___models.py
	|___forms.py
	|___urls.py
templates
	|___ajax_test.html

示例代碼

• ajaxTest.html

<p id="data"> something interesting </p>
<button ajax-url='{% url test_ajax %}'></button>
<span id="ajax-content"></span>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script>

$(document).ready(function () {
    $("button").click(function () {
		var url = $(this).attr('ajax-url');
		var ajax_input_data = $('data').html();
		
		$.ajax({
			url: url,
			data: {
				'ajax_input_data': ajax_input_data
			},
			success: function(return_data){
				$('#ajax-content').html(return_data);
			}
		})
    });
});
</script>

• myapp/urls.py

urlpatterns = [
	'ajax/test_ajax', views.test_ajax, name='test_ajax',
]

• myapp/views.py

def test_ajax(request):
	data = request.GET.get('ajax_input_data');
	# 處理data
	output_data = ...
	
	# 1.直接返回output_data
	# return output_data
	
	# 2.也可以返回html元素
	return render(request, '<b> {{ output_data }}</b>', {"output_data":output_data})

原理

要實現Django和ajax進行數據通信的大致原理如下：

當我們點擊這個button后，觸發js代碼，然后ajax會將必要信息包裝好，即

• url：這個url是在urls.py文件中已經注冊好的，而且它與views.py中的一個函數進行了綁定
• data：其實就是個字典，這個data是作為輸入數據以GET的形式傳給后台
• success：這個表示當數據建立通信且后台代碼處理完后需要執行什么樣的操作。注意這里的function中的data只是形參，所以不同於上面的data，它其實是后台返回的數據。在這個示例中，當后台處理完畢后，會將返回的數據填充到<span>元素中去。

整個數據處理流程可以參看下圖：

其他例子(轉載)

以下內容轉載自Django基礎之ajax

django+ajax基礎使用

模版頁面

index.html

<form>
<input type="text" id="tn">
<button type="button" id="formquery">提交</button>
</form>
<span id='result'></span>
<script>
    $(document).ready(function(){
      $("#formquery").click(function(){
        var toolsname = $("#tn").val();
        $.get("/query/",{'toolsname':toolsname}, function(ret){
            $('#result').html(ret) #在頁面中顯示。可以用用$.ajax方法代替$.get
        })
      });
    });
</script>

以上代碼的參數說明：

• \(.get 表示ajax使用GET方式發送請求，也可以改成\).ajax，或者$.post表示post請求
• id=”tn” 對應着js中獲取的參數名稱$(“#tn”)
• id=”formquery” 對應着按鈕事件所對應的js的函數名稱
• id=’result’ 對應着結果返回到哪個位置$(‘#result’)

注意：這里需要注意的是button的type不能寫submit，因為寫了submit就直接使用get請求/query/了，而沒有執行ajax請求。

view.py

from django.http import HttpResponse
def query(request):
    r=request.GET.get("toolsname")
    name_dict="123"
    return HttpResponse(json.dumps(name_dict), content_type='application/json')
或者可以使用JsonResponse：
from django.http import JsonResponse
def query(request):
    r=request.GET.get("toolsname")
    name_dict="123"
    return JsonResponse(name_dict)

說明：在視圖層，即view.py中，跟正常的接受http請求的方式一樣。views.py 中可以用 request.is_ajax() 方法判斷是否是 ajax 請求。

關於ajax的一些高級用法

等我實驗完再記錄…….

ajax獲取返回值后執行js

<textarea name="content" id="content" class="form-control" rows="20"></textarea>
<script>
    $(document).ready(function(){
      $("#sub_encode").click(function(){
        var content = $("#content").val();
 
        $.get("/add/",{'content':content}, function(ret){
            document.getElementById('content').value = ret
        })
      });
</script>

說明：獲取返回值后，將返回值填充到textarea文本框內。

ajax+post CSRF認證

在ajax代碼前，加入以下js。

<script>
$.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
</script>

ajax+按鈕加載過渡

有時候網頁中的某些功能需要比較長的時間等待，這時候使用ajax是比較好的，因為它不需要整個網頁刷新，用戶體驗比較好。而按鈕加載過渡的意思，就是當你點擊按鈕后，按鈕字體內容變為“加載中”，等到ajax返回內容后再恢復，這樣會使體驗更好。

<button class="btn btn-primary btn-sm" type="button" id='sub_encode' data-loading-text="Loading加載中..." autocomplete="off" onclick="loag()">運行</button>
<!-- 將按鈕過渡的代碼整合到ajax中 -->
<script>
    $(document).ready(function(){
      $("#sub_encode").click(function(){
        var content = $("#content").val();
        var btn = $("#sub_encode"); //獲取按鈕對象
        btn.button('loading');//按鈕顯示為過渡狀態 
 
        $.post("{% url 'run_ajax' %}",{'content':content,"type":"encode"}, function(ret){
            document.getElementById('content').value = ret
            btn.button('reset');//按鈕恢復正常
        })
      });
</script>
<!-- 底部加載js -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

ajax+列表字典返回

ajax返回的內容是json格式的列表或者字典時，該如何渲染到頁面？如下，若后端返回的數據是json：[{“a”:”1”,”b”:”2”},{“c”:3,”d”:”4”}]

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="tn" placeholder="請輸入搜索關鍵詞">
<button type="button" id="formquery" data-loading-text="努力加載中..." autocomplete="off" onclick="loag()">搜索一下</button>
<!-- 搜索結果列表 -->
<p id="list_result" style="word-wrap:break-word;word-break:break-all;"></p>
       
<!-- ajax請求 -->
<script>
    $(document).ready(function(){
      $('#formquery').click(function(){
          var q = $("#tn").val();
          var btn = $("#formquery"); //獲取按鈕對象
          btn.button('loading');//按鈕顯示為過渡狀態
          $.getJSON('/search/',{"q":q},function(ret){
            document.getElementById('list_result').innerText = ""; // 重置<p>的內容
            $.each(ret, function(i,item){ // 遍歷列表
                $.each(item, function(key,value){ // 遍歷字典
                    $('#list_result').append(key+":"+value)
                });
            });
            btn.button('reset');
          })
      })
    });
</script>
<!-- 底部加載js -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

ajax配合頁面自動刷新

<input type="hidden" id="formquery" onclick="loag()"> # 按鈕（隱藏）
<div id="task_schedule_result"></div> # 顯示內容的地方
# 點擊按鈕事情時，發送ajax請求js
<script>
    $(document).ready(function(){
      $('#formquery').click(function(){
          $.getJSON("{% url 'task_schedule' %}",function(ret){
            document.getElementById('task_schedule_result').innerHTML = ret;
          })
      })
    });
</script>
# 自動點擊按鈕js
<script type="text/javascript">
    function myrefresh(){ 
    document.getElementById('formquery').click();
    } 
    setInterval("myrefresh()","10000"); # 每個10秒執行一次點擊按鈕
</script>

說明：以上html代碼是每隔10s利用ajax請求，獲取后端數據代碼。

MARSGGBO♥原創





2019-9-3