Ajax和init_ajax_csrftoken.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

{% csrf_token %}
<input type="text"id="username">
<input type="password" id="pwd" >
<input type="button" id="b1" value="ajax登录校验">


<script src="/static/jquery-3.2.1.min.js"></script>
<script src="/static/init_ajax_csrftoken.js"></script>
<script>
    $("#b1").on("click",function () {
        var username=$("#username").val();
        var pwd=$("#pwd").val();
        $.ajax({
            url:"/login/",
            type:"POST",
            data:{"username":username,"pwd":pwd},
            success:function (arg) {
                {#alert(arg)#}
                {#var ret=JSON.parse(arg)#}
                if (arg.status === 1) {
                    location.href="http://www.baidu.com"
                }else{
                    alert(arg.msg)
                }
            }
        })
    })
</script>
</body>
</html>

<script>
    $(".login_btn").on("click",function () {

        $.ajax({
            url:"",
            type:"post",
            data:{
                csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
                user:$("#user").val(),
                pwd:$("#pwd").val(),
                valid_code:$("#valid_code").val(),
            },
            success:function (data) {
                console.log(data)
                if (data.state){
                    location.href="/index/"
                }
                else{
                     $(".error").text(data.msg)
                }

            }
        })

    })
</script>

传csrftoken

<span class="error" style="color: red;margin-left: 20px"></span>

ajax提交的数据使用的formdata 里面的k 应该和form组件内的k一样，除非不校验 例如 图片

<h3>Ajax上传文件</h3>

<p><input type="text" name="username" id="username" placeholder="username"></p>
<p><input type="file" name="upload_file_ajax" id="upload_file_ajax"></p>

<button id="upload_button">提交</button>
{#注意button标签不要用在form表单中使用#}

<script>
    $("#upload_button").click(function(){

        var username=$("#username").val();
        var upload_file=$("#upload_file_ajax")[0].files[0];

        var formData=new FormData();
        formData.append("username",username);
        formData.append("upload_file_ajax",upload_file);


        $.ajax({
            url:"/upload_file/",
            type:"POST",
            data:formData,
            contentType:false,
            processData:false,

            success:function(){
                alert("上传成功!")
            }
        });


    })
</script>

Ajax上传文件formdata

 processData设置为false。因为data值是FormData对象，不需要对数据做处理。

<form>标签添加enctype="multipart/form-data"属性。

cache设置为false，上传文件不需要缓存。

contentType设置为false。因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。

备注

views.py

from django.shortcuts import render,HttpResponse,redirect
import json
from django.http import JsonResponse


def login(request):
    if request.method == "POST":
        username=request.POST.get("username")
        # print(username)
        pwd=request.POST.get("pwd")
        # print(pwd)
        if username == "alex" and pwd == "123":
            ret={"status":1,"msg":"登陆成功"}
        else:
            ret={"status":0,"msg":"用户名或者密码错误！"}
        # json_ret=json.dumps(ret)
        # return HttpResponse(json_ret)
        from django.http import JsonResponse
        return JsonResponse(ret)
    return render(request,"login.html")

View Code

def login(request):
    if request.is_ajax():
        user=request.POST.get("user")
        pwd=request.POST.get("pwd")
        valid_code=request.POST.get("valid_code")
        res={"state":False,"msg":None}
        valid_str=request.session.get("valid_str")

        if valid_code.upper() == valid_str.upper():
            user=auth.authenticate(username=user,password=pwd)
            if user:
                res["state"]=True
                auth.login(request,user)
            else:
                res["msg"]="userinfo or pwd error"
        else:
                res["msg"]="验证码错误"
        return JsonResponse(res)

    return render(request,"login.html")

Views 使用auth校验

from django.contrib import auth

from django.contrib.auth import authenticate, login

def index(request):
  
    return render(request,"index.html")
  
  
def upload_file(request):
    print("FILES:",request.FILES)
    print("POST:",request.POST)
    return HttpResponse("上传成功!")

views.py(request.FILES)

init_ajax_csrftoken.js (AJAX请求如何设置csrf_token，放入static，然后在html中导入)

// 从COokie取CSRF TOKEN的值

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');


// 将CSRF TOKEN值 设置到AJAX的请求头中，后续的AJAX请求就会自动携带这个CSRF TOKEN

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);
    }
  }
});

init_ajax_csrftoken.js