zoukankan      html  css  js  c++  java
  • ajax请求中 两种csrftoken的发送方法

    通过ajax的方式发送两个数据进行加法运算

    html页面

    <body>
    <h3>index页面 </h3>
    
    <input type="text" name="cal_1">+
    <input type="text" name="cal_2">=
    <input type="text" name="cal_3">
    <button id="b2">计算</button>
    
    <script src="/static/js/jquery.js"></script>
    {#<script src="/static/js/ajax_setup.js"></script>#}
    
    <script>
        $("#b2").click(function () {
            $.ajax({
                url: "/cal2/",//提交的地址
                type: "post",
                //csrftoke 可以通过headers获取, 也可以通过data获取,选择一种发送方式
                {#headers:{"X-csrftoken":$("[name='csrfmiddlewaretoken']").val()},#}
    
                {#headers:{'X-csrftoken':csrftoken,},#}
                //(获取的是cookie里的token的值,跟上一行效果一样一样,但是要引src="/static/js/ajax_setup.js")
    
                data: {
                    i1: $("[name='cal_1']").val(),//获取标签里的值
                    i2: $("[name='cal_2']").val(),
    
                    "csrfmiddlewaretoken": $("[name='carfmiddlewaretoken']").val(),
    
                    {#"csrfmiddlewaretoken":csrftoken,#}
                    //(获取的是cookie里的token的值,跟上一行效果一样一样,但是要引src="/static/js/ajax_setup.js")
                },
                success: function (response) {
                    $("[name='cal_3']").val(response) // 给cal_3赋值
                },
                error: function (response) {
    
                },
            })
    
        });
    
    </script>
    
    </body>

    csrf的发送可以在headers里面发送,也可以在data里面发送.   不管在哪发送,都有两种发送形式.

    第一种方式就是直接在headers 或者 data 获取值,然后发送

        $("#b2").click(function () {
            $.ajax({
                url: "/cal2/",//提交的地址
                type: "post",
                //csrftoke 可以通过headers获取, 也可以通过data获取,选择一种发送方式
                headers:{"X-csrftoken":$("[name='csrfmiddlewaretoken']").val()},
     data: {
                    i1: $("[name='cal_1']").val(),//获取标签里的值
                    i2: $("[name='cal_2']").val(),
    
                    "csrfmiddlewaretoken": $("[name='carfmiddlewaretoken']").val(),

    第二种方式就是引入ajax_setup文件发送. 也是可以通过headers 或者 data

    <script src="/static/js/ajax_setup.js"></script>
    
    <script>
        $("#b2").click(function () {
            $.ajax({
                url: "/cal2/",//提交的地址
                type: "post",
                //csrftoke 可以通过headers获取, 也可以通过data获取,选择一种发送方式
                {#headers:{"X-csrftoken":$("[name='csrfmiddlewaretoken']").val()},#}
    
                headers:{'X-csrftoken':csrftoken,},
                //(获取的是cookie里的token的值,跟上一行效果一样一样,但是要引src="/static/js/ajax_setup.js")
    
    
    <script src="/static/js/ajax_setup.js"></script>

    data: { i1: $(
    "[name='cal_1']").val(),//获取标签里的值 i2: $("[name='cal_2']").val(), {#"csrfmiddlewaretoken": $("[name='carfmiddlewaretoken']").val(),#} "csrfmiddlewaretoken":csrftoken, //(获取的是cookie里的token的值,跟上一行效果一样一样,但是要引src="/static/js/ajax_setup.js") },

    在veiws都一样

    #发ajax计算
    def cal2(request):
        i1=request.POST.get("i1","") # 如果有值就获取,如果没有值就默认获取空字符串  这里的i1 对应的是前端data 里面 i1:$("[name='cal_1']").val()的i1
        i2=request.POST.get("i2","")
        print("i1:",i1)
        print("i2:",i2)
        if i1 and i2:
            i3=int(i1)+int(i2)
        else:
            i3=""
        return HttpResponse(i3)
  • 相关阅读:
    pandas的Categorical方法
    LightBGM之train
    LightBGM之Dataset
    pandas的replace方法
    python的tqdm模块
    pandas的merge方法
    pandas的drop函数
    各种服务器建议配置
    thymeleaf:访问静态方法
    The project cannot be built until its prerequisite base-service is built. Cleaning and building all projects is recommended
  • 原文地址:https://www.cnblogs.com/kenD/p/10125962.html
Copyright © 2011-2022 走看看