AJAX小示例

一、基本内容

定义：AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”，即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）
作用：AJAX就是使用 js 技术发送请求和接收响应
优点：在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容
特点：
- 异步交互
  - 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求
  - 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求
- 局部刷新，无须刷新整个页面
- 传输的数据量少，性能高
应用场景：
- 搜索引擎根据用户输入的关键字，自动提示检索关键字
- 注册时候的用户名的查重

普通示例：页面输入两个整数，通过AJAX传输到后端计算出结果并返回

# urls.py
urlpatterns = [
    url(r'^ajax_add/', views.ajax_add),
    url(r'^ajax_demo1/', views.ajax_demo1),  
]

# views.py
def ajax_demo1(request):
    return render(request, "ajax_demo1.html")

def ajax_add(request):
    i1 = int(request.GET.get("i1"))
    i2 = int(request.GET.get("i2"))
    ret = i1 + i2
    return JsonResponse(ret, safe=False)

{# ajax_demo1.html #}
<input type="text" id="i1">+
<input type="text" id="i2">=
<input type="text" id="i3">
<input type="button" value="AJAX提交" id="b1">

<script src="/static/jquery-3.2.1.min.js"></script>
<script>
    $("#b1").on("click", function () {
        $.ajax({
            url:"/ajax_add/",
            type:"GET",
            data:{"i1":$("#i1").val(),"i2":$("#i2").val()},
            success:function (data) {
                $("#i3").val(data);
            },
            error:function (error) {
                console.log(error)
            },
        })
    })
</script>

二、 jQuery实现的AJAX

最基本的jQuery发送AJAX请求示例

# views.py
def ajax_test(request):
    user_name = request.POST.get("username")
    password = request.POST.get("password")
    print(user_name, password)
    return HttpResponse("OK")

<button id="ajaxTest">AJAX 测试</button>
<script>
    $("#ajaxTest").click(function () {
        $.ajax({
            url: "/ajax_test/",
            type: "POST",
            data: {username: "Q1mi", password: 123456},
            success: function (data) {
                alert(data)
            }
        })
    })
</script>

$.ajax参数

data参数中的键值对，如果值不为字符串，需要将其转换成字符串类型

<script>
    $("#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);
            }
        })
    })
</script>

三、 AJAX通过csrf的校验

前提条件：确保有csrftoken的cookie
- 在页面中使用{% csrf_token %}
- 加装饰器：ensure_csrf_cookie
- 注意：
  - 如果使用从cookie中取csrftoken的方式，需要确保cookie存在csrftoken值
  - 如果你的视图渲染的HTML文件中没有包含 {% csrf_token %}，Django可能不会设置CSRFtoken的cookie。
  - 这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie

AJAX请求如何设置csrf_token

通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送

$.ajax({
 url: "/cookie_ajax/",
 type: "POST",
 data: {
     "username": "Q1mi",
     "password": 123456,
     {# 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中 #}
     "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()
 },
 success: function (data) {
     console.log(data);
 }
})

通过获取返回的cookie中的字符串，放置在请求头中发送
- 注意：需要引入一个jquery.cookie.js插件

$.ajax({
 url: "/cookie_ajax/",
 type: "POST",
 {# 从Cookie取csrftoken，并设置到请求头中 #}
 headers: {"X-CSRFToken": $("[name = 'csrfmiddlewaretoken']").val()},
 data: {"username": "Q1mi", "password": 123456},
 success: function (data) {
     console.log(data);
 }
})

使用文件：自己写一个getCookie方法
- 粘贴在 static 下的 js 中的一个js文件，比如：ajax_setup.js

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]);
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
// 通过js获取csrftoken的值
var csrftoken = getCookie('csrftoken');

// 使用$.ajaxSetup()方法为ajax请求统一设置
function csrfSafeMethod(method) {
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

$.ajaxSetup({
  beforeSend: function (xhr, settings) {
    // 不是 GET|HEAD|OPTIONS|TRACE 这些请求的话，就执行if后的操作
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
      xhr.setRequestHeader("X-CSRFToken", csrftoken);   // 设置请求头，本质同方法2
    }
  }
});

四、 AJAX上传文件

上传文件示例

<input type="file" id="f1">
<button id="b1">上传</button>

<script src="/static/jquery.js"></script>
<script>
    $('#b1').click(function () {
        var  formobj =  new FormData();
        formobj.append('file',$('#f1')[0].files[0]);
        formobj.append('name','alex');
        $.ajax({
            url: '/upload/',
            type: 'post',
            data:formobj ,
            processData:false,
            contentType:false,
            success: function (res) {
                $("[name='i3']").val(res)
            },
        })
    })
</script>

一、 基本内容

二、 jQuery实现的AJAX

三、 AJAX通过csrf的校验

四、 AJAX上传文件

猜你喜欢

一、基本内容