AJAX的特点
1. 异步
2. 局部刷新
AJAX的优缺点
优点：
- AJAX使用JavaScript技术向服务器发送异步请求；
- AJAX请求无须刷新整个页面；
- 因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；
jQuery实现的AJAX
最基本的jQuery发送AJAX请求示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax_add</title> </head> <body> <input type="text" id="i1" name="i1">+ <input type="text" id="i2" name="i2">= <input type="text" id="i3" name="i3"> <input type="submit" id="i4"> <input type="submit" id="i5" value="post_add"> {% csrf_token %} <script src="/static/jquery-3.3.1.js"></script> <script> $('#i4').on("click", function () { $.ajax({ url:"/index/", type:'GET', data:{"i1":$('#i1').val(), "i2":$("#i2").val()}, success:function (data) { $("#i3").val(data); } }) }) $("#i5").on("click", function () { var csrf = $("[name='csrfmiddlewaretoken']").val() $.ajax({ url:'/post_index/', type:'POST', data:{"i1":$("#i1").val(), "i2":$("#i2").val(), 'csrfmiddlewaretoken':csrf}, success:function (data) { $("#i3").val(data); } }) }) </script> </body> </html>
AJAX参数
data参数中的键值对，如果值值不为字符串，需要将其转换成字符串类型。
$("#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); } }) })
AJAX请求如何设置csrf_token
方式1
通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送。
$("#i5").on("click", function () { var csrf = $("[name='csrfmiddlewaretoken']").val() $.ajax({ url:'/post_index/', type:'POST', data:{"i1":$("#i1").val(), "i2":$("#i2").val(), 'csrfmiddlewaretoken':csrf}, success:function (data) { $("#i3").val(data); } }) })
方式2
可以使用$.ajaxSetup()方法为ajax请求统一设置
在/static/中新建一个js文件，将此段代码粘贴进去，就可以实现统一请求设置了，不需要再在ajax请求的data中写上述方法的数据
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');
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内置的serializers
def books_json(request): book_list = models.Book.objects.all()[0:10] from django.core import serializers ret = serializers.serialize("json", book_list) return HttpResponse(ret)
SweetAlert插件示例
$(".btn-danger").on("click", function () { swal({ title: "你确定要删除吗？", text: "删除可就找不回来了哦！", type: "warning", showCancelButton: true, confirmButtonClass: "btn-danger", confirmButtonText: "删除", cancelButtonText: "取消", closeOnConfirm: false }, function () { var deleteId = $(this).parent().parent().attr("data_id"); $.ajax({ url: "/delete_book/", type: "post", data: {"id": deleteId}, success: function (data) { if (data.status === 1) { swal("删除成功!", "你可以准备跑路了！", "success"); } else { swal("删除失败", "你可以再尝试一下！", "error") } } }) }); })