django使用ajax 與後臺進行交互

需求：點擊datatable 的一行diaoyon數據，顯示一個模態框，模態框顯示該行的全部屬性

解決方法： 點擊datatable 這一行後，首先構造一個模態框 而後利用ajax 將行的某個屬性傳回後臺 後臺d調用數據庫將屬性全部查詢後 用json 形式發送給前臺 前臺的模態框進行渲染：

實現步驟：

1、構建一個模態框：具體使用方法可以在網上找：https://www.w3h5.com/post/74.html

<div class="container">
    <h2>創建模態框（Modal）</h2>
    <!-- 按鈕觸發模態框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態框</button>
    <!-- 模態框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">模態框（Modal）標題</h4>
                </div>
                <div class="modal-body">在這裏添加一些文本</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                    <button type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>

2、將表格中的部分數據發送到前端：

在進行頁面跳轉時 csrf 協議 即ajaxsetup 是必須要加上的
$.ajaxSetup({
            data: {
              csrfmiddlewaretoken: '{{ csrf_token }}'
            },
          });
下面是ajax 主要部分  
url: 將要跳轉至的url 這條url 的主要目的是爲了執行 view 中的各種操作（這條url 的模式是url->view 而非普通的url->view->templates）
data :將要發送給後端(即url對應的view) 的數據 通過這個數據我們就可以對數據庫進行操作
datatype json : 數據是以json形式進行傳輸的
type: 對後端進行post 請求
success: 前端將數據發送給後端 後端經過數據處理後 發送給前端  即整個ajax 操作成功時候應該做的事情 
          $.ajax({
            url: '/modal_ajax/',
            data: {
              host: table.row('.selected').data()['de_id']
            },
            dataType: "json",
            type: 'post',
            success: function (data) {
              // alert(data['host'])
            }
          })

3、構建上一步所說的url

# 2020 3 10 孔格添加 用來 進行模態框的ajax 傳值
url('modal_ajax/', rawview.modal_ajax)

4、在上一步url 對應 的view 中進行操作

裏面需要注意的是 :由於我們上一步是用ajax 進行操作的 傳回的請求是post 所以必須有

request.is_ajax()

利用data = request.POST 得到前端的數據

然後將前端的值進行處理 然後發送給前端 數據類型一定要是json

對於django 中的model 對象其實有多種操作方式將其轉化爲json 例：

# 將models 轉化爲 字典
dict_drug = model_to_dict(modal_drug)
# 將字典轉化爲json 對象
json_drug = serializers.serialize("json", dict_drug)

但是不符合需求 所以我用了最笨的方法

# 一定要記得引入json 包
from django.http import JsonResponse
def modal_ajax(request):
    if request.is_ajax():
       # 直接獲取所有的post請求數據
       data = request.POST
       # 獲取其中的某個鍵的值
       modal_drug_de_id = request.POST.get("host")
       print(data)
       print('modal de_id get is ----------------------------->{}'.format(modal_drug_de_id))
       _,drug = models.ChildrenAndGrands.check_one_two_three_and_get(de_id = modal_drug_de_id)
       modal_drug_de_id = drug.de_id
       modal_drug_smiles = drug.smiles
       modal_drug_mw = drug.mw
       modal_drug_logp = drug.logp
       modal_drug_h_a = drug.h_a
       modal_drug_h_d = drug.h_d
       modal_drug_r_b = drug.r_b
       modal_drug_tpsa = drug.tpsa
       modal_drug_qed = drug.qed
       modal_drug_sascore = drug.sascore
       modal_drug_parents_id = drug.parents_id
       modal_drug_ns_id = drug.ns_id
       modal_drug_pdb_code = drug.pdb_code
       modal_drug_drugbank_code = drug.drugbank_code
       modal_drug_bindingdb_code = drug.bindingdb_code
       modal_drug_chembl_code = drug.chembl_code
       modal_drug_ccdc_code = drug.ccdc_code

       # 將models 轉化爲 字典
    #    dict_drug = model_to_dict(modal_drug)
    #    將字典轉化爲json 對象
    #    json_drug = serializers.serialize("json", dict_drug)
       
       response = JsonResponse({
           'modal_drug_de_id':modal_drug_de_id,
           'modal_drug_mw':modal_drug_mw,
           'modal_drug_smiles': modal_drug_smiles,
           'modal_drug_logp' :  modal_drug_logp,
           'modal_drug_h_a' :  modal_drug_h_a,
           'modal_drug_h_d' : modal_drug_h_d,
           'modal_drug_r_b' : modal_drug_r_b,
           'modal_drug_tpsa' : modal_drug_tpsa,
           'modal_drug_qed' : modal_drug_qed,
           'modal_drug_sascore' : modal_drug_sascore,
           'modal_drug_parents_id' : modal_drug_parents_id,
           'modal_drug_ns_id' : modal_drug_ns_id,
           'modal_drug_pdb_code' : modal_drug_pdb_code,
           'modal_drug_drugbank_code' : modal_drug_drugbank_code,
           'modal_drug_bindingdb_code' : modal_drug_bindingdb_code,
           'modal_drug_chembl_code' : modal_drug_chembl_code,
           'modal_drug_ccdc_code' : modal_drug_ccdc_code,
           })
       return response
    else:
        return render(request,'404.html')