Django Ajax请求实例

Ajax请求：

  异步请求，在不刷新页面的情况下，向服务器发起局部请求，请求成功之后，数据返回到发起请求的位置，通常是一段js代码。

• 常规请求的弊端：
   1.容易提交冗余
   2.用户体验差
• 使用ajax的原因：
   1.ajax是局部提交
   2.ajax提交不会刷新页面，用户体验好
   3.ajax可以进行异步提交，保证页面流畅

Ajax是基于js语言，在前端构建一个请求对象，发起请求的过程，使用原生js可以完成ajax的编写，但是代码太过复杂。通常在开发过程当中，我们使用jquery进行ajax请求。

一、Ajax get请求（以校验用户名是否存在为例）
1.前端部分：

<script src="/static/static/jquery/2.2.4/jquery.min.js"></script>
<script>
$(
    function () {
        $('#username').blur(
            function () {
                var username = $('#username').val();
                $.ajax(
                    {
                        url:"/userValid/?name="+username,
                        type:"get",
                        data:"",
                        success:function (data) {
                            $('#error_massage').text(data["data"])
                            console.log(data["data"])
                        },
                        error:function (error) {
                            console.log(error)
                        }
                    }
                )

            }
        )
    }
)
</script>

2.视图函数部分

from django.http import JsonResponse
def userValid(request):
    result = {"data": "","code": 200}
    username = request.GET.get("name")
    if username:
        user = LoginUser.objects.filter(nickname=username).first()
        if user:
            result["data"] = "用户名重复"
        else:
            result["data"] = "用户名可以使用"
    return JsonResponse(result)

效果如下：

二、Ajax post请求

1.前端部分

<script>
$("#submit").click(
    function () {
        var username = $("#username").val();
        var email = $("#email").val();
        var password = $("#password").val();
        var picture = $("#picture")[0].files[0];

        var formData = new FormData();
        formData.append("username",username);
        formData.append("email",email);
        formData.append("password",password);
        formData.append("picture",picture);
        formData.append("csrfmiddlewaretoken",'{{ csrf_token }}');
        $.ajax(
            {
                url:"/register_ajax/",
                type:"post",
                data:formData,
                processData: false, //是否严格校验数据类型
                contentType:false, //是否严格校验内容类型
                dataType: "json", //请求数据的格式为json，在部分浏览器需要
                success:function (data) {
                    console.log(data)
                    alert('提交成功')
                },
                error:function (error) {
                    console.log(error)
                }
            }
        )


    }
)
</script>

• 注意：
  1.图片获取方式
  2.文件上传需要使用FormData对数据进行封装
  3.如果传输图片，需要特殊校验：
    processData 是否严格校验数据类型
    contentType 是否严格校验内容类型
    dataType 传输数据的类型

2.视图函数

def register_ajax(request):
    if request.method == "POST":
        username = request.POST.get('username')
        password = request.POST.get('password')
        email = request.POST.get('email')
        picture = request.FILES.get('picture')
        user = LoginUser()
        user.nickname = username
        user.email = email
        user.picture = picture
        user.save()
    return JsonResponse({"data": "保存成功"})

3.效果展示

三、 总结

我画了一张图来解释整个ajax请求过程