前端小知识点

jQuery中生成标签的方法是$('标签名'),生成的是没有任何属性的标签$("<标签名></标签名>")

$(".b1").click(function () {
    //生成 script标签       jQuery生成标签的方法就是$("标签名") 生成的是没有任何属性的标签$("<标签名></标签名>")
    var $ele_script=$("<script>");
    $ele_script.attr("src","http://127.0.0.1:8002/ajax_send/");//给script添加src属性以及属性值
    $ele_script.attr("class","kuayu");
    //标签构建后之后添加到body标签中
    $("body").append($ele_script);

})

from django.shortcuts import render,HttpResponse

# Create your views here.
def index(request):
    return render(request,"index.html")

def ajax_send(request):
    '''
    由于ajax发送过来的数据是json类型的,所以需要导入json反序列化数据才能取出来
    :param request:
    :return:
    只有请求header中的'Content-Type'：'application/x-www-form-urlencoded'才会填充request.POST，
    其它情况下只有一个空的<QueryDict: {}>。
    '''
    # import json
    # print(request.GET)      #{}
    # print(request.POST)     #{}
    # print(json.loads(request.body.decode()))
    # print(json.loads(request.body.decode()).get("k"))

    #==========================
    import json
    # return HttpResponse(json.dumps({"name":"yuan"}))
    return HttpResponse("{'name':'yuan'}")  #响应数据不是json类型的

    # return HttpResponse("ok")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<button class="json_send">send</button>
{% csrf_token %}<!--如果没有写csrftoken 会报Forbidden的这个错误 ,写了这一行还要提交怎么提交是个问题-->

<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>

//ajax请求中的contentType类型为json

    /* $(".json_send").click(function () {
        //console.log(JSON.stringify({"k":"v","csrf_token":$("[csrf_token='csrfmiddlewaretoken']").val()}));  //{"k":"v"}
        // console.log({"csrf_token":$("[csrf_token='csrfmiddlewaretoken']").val()}); //{csrf_token: undefined}

        $.ajax({
            url: "/ajax_send/",
            //由于提交的data是json类型的,也就是提交过去的是一个字符串,服务端取不出来data中的csrf_token,所以还会有forbidden的报错
            //data:JSON.stringify({"k":"v","csrf_token":$("[csrf_token='csrfmiddlewaretoken']").val()}),
            data:JSON.stringify({"k":"v"}),

            //把csrftoken放在headers中发送给服务端,服务端从request.Meta中取出数据,
            //如果使用headers发送csrftoken数据,必须要用引入jquery.cookie.js
            headers:{"X-CSRFToken":$.cookie('csrftoken')},
            type: "post",

            contentType: "application/json",//设置ajax发送的数据编码类型是json
            success: function (data) {
                console.log(data)
            }
        })
    }) */



//  ajax的另外一个参数 回调函数error:function(data){} 当请求数据在执行的过程中抛出异常时,会在error:function的回调函数中捕获
    $(".json_send").click(function () {
        $.ajax({
            url:"/ajax_send/",
            dataType:"json",
            success:function (data) {
                console.log(data);
                console.log(typeof(data))
            },
            error:function (jqXHR, textStatus, err) {
                console.log("error------------------")
            }
        })
    })



</script>


</body>
</html>

猜你喜欢