Django ajax

Ajax介绍

网页局部提交给服务器，服务器响应请求，但是不刷新页面，这种技术叫做ajax,(异步提交)

局部提交

不影响其他体验

降低网页刷新的损耗

原生ajax是完全有js编写的，js的ajax由于浏览器版本问题需要繁复的编写，所以我们使用jq ajax

JQ AJAX

Jq ajax依赖$.ajax()方法进行设置，括号当中需要设置一个字典来编写ajax的参数。

Url ajax的请求地址

Type ajax请求的类型，get,post

Data ajax请求携带的参数

Success ajax请求成功之后的回调函数，需要回调函数有一个参数来接受服务器响应的内容

Error ajax请求失败的回调函数，需要回调函数有一个参数来接受服务器响应的错误内容

dataType 预期服务器返回数据的类型，

Xml

Html

Script

Json

Jsonp

Text

Global 全局，是否触发全局的ajax

Ifmodified 如果数据改变时获取新的数据

Timeout 请求超时时间

<script>
      $(
          function () {
              $.ajax(
                  {
                      url: "/userValid/?email=111@qq.com",
                      type: "get",
                      data: "",
                      success: function (data) {
                          console.log(data)
                      },
                      error: function (error) {
                          console.log(error)
                      }
                  }
              )
          }
      ) // 当页面加载完成自动执行
</script>

Ajax get

我们用ajax get方法进行用户身份校验

首先编写校验用户是否存在的试图函数

Ajax很少返回页面，大部分采用json数据，在老版本的django当做需要开发者手动用json模块 封装json数据，新版本推出了jsonResponse方法，可以自动将字典对象转换为json格式

from django.http import JsonResponse

def userValid(request):
    result = {"state": "error","data": ""}
    if request.method == "GET" and request.GET:
        eamil = request.GET.get("email")
        user = OAUser.objects.filter(email = eamil)
        if user:
            result["data"] = "用户名已经存在"
        else:
            result["state"] = "success"
            result["data"] = "用户名可以使用"
    else:
        result["data"] = "get method has no response"
    return JsonResponse(result)

其次定义ajax校验函数的路由

from OAUser.views import userValid

urlpatterns += [
    path("userValid/",userValid)
]

最后在页面上发起ajax请求

1、捕获email输出文本框，触发失焦时间

2、在email文本框有值的前提下调用ajax

3、处理ajax的返回结果(尽量以用户可以接受的形式展示数据)

<script>
      $(
          function () {
              $("#exampleInputEmail").blur( //--->1<---
                   function () {
                       var value = $("#exampleInputEmail").val()
                       if(value){  //--->2<---
                            $.ajax(8
                                  {
                                      url: "/userValid/?email="+value,
                                      type: "get",
                                      data: "",
                                      success: function (data) {
                                          console.log(data);
                                          alert(data['data'])
                                      },//--->3<---
                                      error: function (error) {
                                          console.log(error)
                                      }
                                  }
                              )
                       }
                   }
              );

          }
      ) // 当页面加载完成自动执行
</script>

Ajax post

Ajax post也必须携带csrftoken

Ajax 数据封装

Ajax post 注册

首先创建两个试图

试图1用来指出页面

试图2用来处理ajax请求

def register_ajax(request):
    """
    基于ajax的数据请求页面  指出页面
    :param request:
    :return:
    """
    return render(request,"register_ajax.html",locals())
def register_data(request):
    """
    基于ajax的数据保存试图 处理请求
    :param request:
    :return:
    """
    result = {"state": "error", "data": "hello world"}
    if request.method == "POST" and request.POST:
        data = request.POST
        username = data.get("username")
        eamil = data.get("email")
        password = data.get("password")

        OAUser.objects.create(
            username = username,
            password = setPassword(password),
            email = eamil
        )
        result["state"] = "success"
        result["data"] = "save success"
    return JsonResponse(result)
     

指出路由：

urlpatterns += [
    path("userValid/",userValid),
    path("reg_a/", register_ajax),
    path("reg_d/", register_data),
]

前端ajaxpost请求

1、post数据最基础可以是一个类字典对象

2、Post也需要csrftoken

$("#submit").click(
    function () {
        var username = $("#exampleFirstName").val()
        var email = $("#exampleInputEmail").val()
        var password = $("#exampleInputPassword").val()
        var sendData = {
            "username": username,
            "email": email,
            "password": password,
            "csrfmiddlewaretoken": '{{ csrf_token }}'
        };
        $.ajax(
            {
                url: "/reg_d/",
                type: "post",
                data: sendData,
                success: function (data) {
                    console.log(data)
                },
                error: function (error) {
                    console.log(error)
                }
            }
        )

    }
)

注意事项

form表单提交需带有图片的内容

1、form标签如果有文件上传，必须有enctype属性

<form class="user" method="post" enctype="multipart/form-data">

......

</form>

2、Submit提交到后台，文件对象需要用request.FILES方法进行接收

def register_student(request):
    if request.method == "POST" and request.POST:
        data = request.POST
        file = request.FILES
        name = data.get("name")
        age = data.get("age")
        gender = data.get("gender")
        classes = data.get("classes")
        grade  = data.get("grade")
        picture = file.get("picture")

        s = Student()
        s.name = name
        s.age = age
        s.gender = gender
        s.classes = classes
        s.grade = grade
        s.picture = picture
        s.save()

    return render(request,"register_student.html",locals())

在老版本的django当做，文件是不可以直接保存的，需要用循环进行手动的写入

2、Jq ajax提交带有图片的内容

         1、jq进行含有图片上传的表单的时候，需要用forms类来封装数据

          2、捕获文件上传组件的值的方法

              document.getElementById("picture").files[0]

          3、和其他的post请求一样，需要csrfmiddlewaretoken

              var csrfmiddlewaretoken = '{{ csrf_token }}';

4、Ajax需要取消格式和类型的严格审查

              processData: false, //是否严格检查请求格式

              contentType: false, //是否严格检查请求内容类型

5、

$(
    function () {
        $("#submit").click(
            function () {
                var forms = new FormData();  //--->1<---
                var name = $("#name").val();
                var age = $("#age").val();
                var gender = $("#gender").val();
                var classes = $("#classes").val();
                var grade = $("#grade").val();
                var csrfmiddlewaretoken = '{{ csrf_token }}';
                forms.append("name",name)
                forms.append("age",age)
                forms.append("gender",gender)
                forms.append("classes",classes)
                forms.append("grade",grade)
                forms.append("csrfmiddlewaretoken",csrfmiddlewaretoken)
                forms.append("picture",document.getElementById("picture").files[0])


                $.ajax(
                    {
                        url:"/areg_stu_data/",
                        type:"post",
                        data:forms,
                        processData: false,  //是否严格检查请求格式
                        contentType: false, //是否严格检查请求内容类型
                        success:function (data) {
                            state = data["state"]
                            if(state == "success"){
                                $("#void").text("注册成功") ;
                                $("#name").val("");
                                $("#age").val("");
                                $("#gender").val("");
                                $("#classes").val("");
                                $("#grade").val("");
                            }
                        },
                        error: function (error) {
                            console.log(error)
                            alert(error)
                        }
                    }
                )
            }
        )
    }
) // 当页面加载完成自动执行
 
    后台保存试图和form表单保存相似。