ajax success function_Django：AJAX（二）
3|0jQuery實(shí)現(xiàn)的AJAX
最基本的jQuery發(fā)送AJAX請求示例：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> .hide { display: none; }
</style> </head> <body>
<p><input type="text" class="user">
<span class="hide" style="color: red">用戶名已存在</span></p> <script src="/static/jquery-3.3.1.min.js"></script>
{#下面這一項(xiàng)是基于jQuery的基礎(chǔ)上自動給我們的每一個(gè)ajax綁定一個(gè)請求頭信息，類似于form表單提交post數(shù)據(jù)必須要有的csrf_token一樣#} {#否則我的Django中間件里面的校驗(yàn)csrf_token那一項(xiàng)會認(rèn)為你這個(gè)請求不是合法的，阻止你的請求#} <script src="/static/setup_Ajax.js"></script> <script> //給input框綁定一個(gè)失去焦點(diǎn)的事件 $('.user').blur(function () { //$.ajax為固定用法，表示啟用ajax $.ajax({ //url后面跟的是你這個(gè)ajax提交數(shù)據(jù)的路徑，向誰提交，不寫就是向當(dāng)前路徑提交 url:'', //type為標(biāo)定你這個(gè)ajax請求的方法 type:'POST', //data后面跟的就是你提交給后端的數(shù)據(jù) data:{'username':$(this).val()}, //success為回調(diào)函數(shù)，參數(shù)data即后端給你返回的數(shù)據(jù) success:function (data) { ret=JSON.parse(data); if (ret['flag']){ $('p>span').removeClass('hide'); } } }) }); </script> </body> </html>
3|1views.py：
def index(request): if request.method=='POST': ret={'flag':False} username=request.POST.get('username') if username=='JBY': ret['flag']=True import json return HttpResponse(json.dumps(ret)) return render(request,'index.html')
3|2$.ajax參數(shù)
data參數(shù)中的鍵值對，如果值值不為字符串，需要將其轉(zhuǎn)換成字符串類型。
$("#b1").on("click", function () { $.ajax({ url:"/ajax_add/", type:"GET", data:{"i1":$("#i1").val(),"i2":$("#i2").val(),"hehe": JSON.stringify([1, 2, 3])}, success:function (data) { $("#i3").val(data); } }) })
4|0JS實(shí)現(xiàn)AJAX(了解)
var b2 = document.getElementById("b2"); b2.onclick = function () { // 原生JS var xmlHttp = new XMLHttpRequest(); xmlHttp.open("POST", "/ajax_test/", true); xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlHttp.send("username=q1mi&password=123456"); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState === 4 && xmlHttp.status === 200) { alert(xmlHttp.responseText); } }; };
5|0AJAX請求如何設(shè)置csrf_token
不論是ajax還是誰，只要是向我Django提交post請求的數(shù)據(jù)，都必須校驗(yàn)csrf_token來防偽跨站請求，那么如何在我的ajax中弄這個(gè)csrf_token呢，我又不像form表單那樣可以在表單內(nèi)部通過一句{% csrf_token %}就搞定了......
方式1
通過獲取隱藏的input標(biāo)簽中的csrfmiddlewaretoken值，放置在data中發(fā)送。
$.ajax({ url: "/cookie_ajax/", type: "POST", data: { "username": "Tonny", "password": 123456, "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val() // 使用JQuery取出csrfmiddlewaretoken的值，拼接到data中 }, success: function (data) { console.log(data); } })
方式2
通過獲取返回的cookie中的字符串 放置在請求頭中發(fā)送。
注意：需要引入一個(gè)jquery.cookie.js插件。
$.ajax({ url: "/cookie_ajax/", type: "POST", headers: {"X-CSRFToken": $.cookie('csrftoken')}, // 從Cookie取csrf_token，并設(shè)置ajax請求頭 data: {"username": "Q1mi", "password": 123456}, success: function (data) { console.log(data); } })
方式3
或者用自己寫一個(gè)getCookie方法：
function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie !== '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) === (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } var csrftoken = getCookie('csrftoken');
每一次都這么寫太麻煩了，可以使用$.ajaxSetup()方法為ajax請求統(tǒng)一設(shè)置。
function csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); } $.ajaxSetup({ beforeSend: function (xhr, settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } } });
將下面的文件配置到你的Django項(xiàng)目的靜態(tài)文件中，在html頁面上通過導(dǎo)入該文件即可自動幫我們解決ajax提交post數(shù)據(jù)時(shí)校驗(yàn)csrf_token的問題，(導(dǎo)入該配置文件之前，需要先導(dǎo)入jQuery，因?yàn)檫@個(gè)配置文件內(nèi)的內(nèi)容是基于jQuery來實(shí)現(xiàn)的)
更多細(xì)節(jié)詳見：Djagno官方文檔中關(guān)于CSRF的內(nèi)容
5|1練習(xí)（用戶名是否已被注冊）
功能介紹
在注冊表單中，當(dāng)用戶填寫了用戶名后，把光標(biāo)移開后，會自動向服務(wù)器發(fā)送異步請求。服務(wù)器返回這個(gè)用戶名是否已經(jīng)被注冊過。
案例分析
- 頁面中給出注冊表單；
- 在username input標(biāo)簽中綁定onblur事件處理函數(shù)。
- 當(dāng)input標(biāo)簽失去焦點(diǎn)后獲取 username表單字段的值，向服務(wù)端發(fā)送AJAX請求；
- django的視圖函數(shù)中處理該請求，獲取username值，判斷該用戶在數(shù)據(jù)庫中是否被注冊，如果被注冊了就返回“該用戶已被注冊”，否則響應(yīng)“該用戶名可以注冊”。
答案就在前面的示例中，看你能不能找到了......
6|0序列化
6|1Django內(nèi)置的serializers
什么意思呢？就是我的前段想拿到由ORM得到的數(shù)據(jù)庫里面的一個(gè)個(gè)用戶對象，我的后端想直接將實(shí)例化出來的數(shù)據(jù)對象直接發(fā)送給客戶端，那么這個(gè)時(shí)候，就可以用Django給我們提供的序列化方式
def ser(request): #拿到用戶表里面的所有的用戶對象 user_list=models.User.objects.all() #導(dǎo)入內(nèi)置序列化模塊 from django.core import serializers #調(diào)用該模塊下的方法，第一個(gè)參數(shù)是你想以什么樣的方式序列化你的數(shù)據(jù) ret=serializers.serialize('json',user_list) return HttpResponse(ret)
7|0補(bǔ)充一個(gè)SweetAlert插件示例
$("#b55").click(function () { swal({ title: "你確定要?jiǎng)h除嗎？", text: "刪除可就找不回來了哦！", type: "warning", showCancelButton: true, // 是否顯示取消按鈕 confirmButtonClass: "btn-danger", // 確認(rèn)按鈕的樣式類 confirmButtonText: "刪除", // 確認(rèn)按鈕文本 cancelButtonText: "取消", // 取消按鈕文本 closeOnConfirm: false, // 點(diǎn)擊確認(rèn)按鈕不關(guān)閉彈框 showLoaderOnConfirm: true // 顯示正在刪除的動畫效果 }, function () { var deleteId = 2; $.ajax({ url: "/delete_book/", type: "post", data: {"id": deleteId}, success: function (data) { if (data.code === 0) { swal("刪除成功!", "你可以準(zhǔn)備跑路了！", "success"); } else { swal("刪除失敗", "你可以再嘗試一下！", "error") } } }) }); })
上面這個(gè)二次確認(rèn)的動態(tài)框樣式，你也可以直接應(yīng)用到你的項(xiàng)目中
提醒事項(xiàng)：
1.上述的樣式類部分渲染的樣式來自于bootstrap中，所有建議在使用上述樣式時(shí)，將bootstrap的js和css也導(dǎo)入了，這樣的情況下，頁面效果就不會有任何問題
2.彈出的上述模態(tài)框中，可能字體會被圖標(biāo)掩蓋一部分，可通過調(diào)整字體的上外邊距來解決
補(bǔ)充:
如下:
總結(jié)
以上是生活随笔為你收集整理的ajax success function_Django：AJAX（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 怎样用计算机制作思维导图,如何使用电脑制
- 下一篇： 计算机系统基础：校验码知识笔记