Ajax和init_ajax_csrftoken.js

時間 2019-11-08

標籤 ajax init csrftoken.js csrftoken 欄目 Ajax 简体版

原文原文鏈接

<!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.pyjquery

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中導入)ajax

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