Django -Ajax

 Ajax

 

特点优势：

1. 异步请求
2. 局部刷新

常用参数：

1. URL：请求路径，为空则默认为脚本所在路径
2. type：请求方式，get和post
3. data：数据，可自定义数据格式
4. contentType：数据编码格式
5. processData：数据是否预处理
6. sucess:function({data){}：回调函数，处理前端返回的数据

    $(".btn").click(function () {
        $.ajax({
            url:"",
            type:"post",
            data:"",
            contentType:'',
            processData: '',
            success:function (data) {
            }
        })

    })

自定义数据格式：

将data中的数据以Json的格式传递

1. JSON.stringify：序列化字符串
2. JSON.parse：反序列化字符串

    $(".btn").click(function () {
        $.ajax({
            url:"",
            type:"post",
            data:JSON.stringify({"a":1,"b":2}), # 使用jQuery的 JSON序列化
            contentType:'',
            processData: '',
            success:function (data) {
                console.log(data)
            }
        })

    })

Ajax表单登录验证

视图函数处理：

def login(request):
    state = {"user":None,"msg":""}
    user =request.POST.get("user")
    pwd =request.POST.get("pwd")
    user = User.objects.filter(user=user,pwd=pwd).first()
    if user:
        state["user"] = user.user
    else:
        state["msg"] = "wrong"
    return HttpResponse(json.dumps(state))

HTML文件：

<h1>Ajax表单的登录验证</h1>
    <form>
        user:<input type="text" id="user">
        pwd:<input type="password" id="pwd">
        <input type="button" id="ajax_login" value="ajax">
        <span class="error"></span>
    </form>
<script>
    $("#ajax_login").click(function () {

        $.ajax({
            url: "/login/",
            data: {
                "user":$("#user").val(),
                "pwd":$("#pwd").val(),
            },
            type: "post",

            success:function (data) {
               
                console.log(data);  // {"user": "tom", "msg": ""}
                console.log(typeof data); //str类型
                var data = JSON.parse(data);  // 将json字符串转为jQuery的数据格式
                console.log(typeof data); // obj类型
                if  (data.user){
                    location.href="http://www.baidu.com"
                }
                else {
                    $(".error").html(data.msg).css({"color":"red","magain-ringt":"10px"})
                }
            }
        })
    })

 

Ajax传输键值对数据：

    <form enctype="multipart/form-data" >
        用户名:<input type="text" id="name"  >
        头  像:<input type="file" id="files"  >
        <input type="button" class="btn" value="ajax">
    </form>
<script>
    $(".btn").click(function () {
        $.ajax({
            url:"",
            type:"post",
            data:{
                "name":$("#name").val(),
                "files":$("#files").val(),
            },
            success:function (data) {
                console.log(data)
            }
        })

    })
</script>

处理函数打印结果：

body: b'name=Tom&files=C%3A%5Cfakepath%5C%E6%9D%A8%E5%B9%823.jpg'
post: <QueryDict: {'name': ['Tom'], 'files': ['C:\\fakepath\\杨幂3.jpg']}>

 

在请求头Form Data中即可看到数据：

Ajax文件传输：

Ajax传输文件需要先创建 “FormData“，然后根据导入 数据  formdata.append("",""); # 以键值对的形式导入 

        var formdata =new FormData();
        formdata.append("name",$("#name").val());
        formdata.append("files",$("#files")[0].files[0]);

HTML文件：

<h1>Ajax表单上传文件</h1>
    <form >
        用户名:<input type="text" id="name"  >
        头  像:<input type="file" id="files"  >
        <input type="button" class="btn" value="ajax">
    </form>
<script>
    $(".btn").click(function () {
        var formdata =new FormData();
        formdata.append("name",$("#name").val());
        formdata.append("files",$("#files")[0].files[0]);

        $.ajax({
            url:"",
            type:"post",
            contentType: false,
            processData: false,
            data:formdata,
            success:function (data) {
                console.log(data)
            }
        })
    })
</script>

其中， $("#files")[0].files[0]  是获取Jquery获取文件的固定格式

函数处理：

    if request.method == "POST":     
        files = request.FILES.get("files")   # 获取文件
        with open(files.name,"wb") as f:
            for line in files:
                f.write(line)
        return HttpResponse("ok")
    return render(request,"upfiles.html")  

扩展：POST、body，FILES

打印上面的示例　　　　　　

　　　　　print("body:",request.body)

　　　　　　# 只要报文的请求体中有值，body里就会有数据
　　　　 print("post:",request.POST)  #  post: <QueryDict: {'name': ['Tom']}>  编码为encod时 才会讲body中的bety数据类型转为字典 以方便获取值
        print("FILES:",request.FILES) # FILES: <MultiValueDict: {'files': [<InMemoryUploadedFile: 杨幂4.jpg (image/jpeg)>]}> # 只有在传输文件时才有值