Django - Ajax - 参数

1、Jquery实现Ajax

url type data success error complete statusCode javascript

{% load staticfiles %} <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{% static 'JS/jquery-3.1.1.js' %}"></script>
</head>
<body>

<button class="send_Ajax">send_Ajax</button>

<script>
      //$.ajax的两种使用方式:

      //$.ajax(settings);
      //$.ajax(url,[settings]);
 $(".send_Ajax").click(function(){ $.ajax({ url:"/handle_Ajax/", type:"POST", data:{username:"Yuan",password:123}, success:function(data){ alert(data) }, //=================== error============
 error: function (jqXHR, textStatus, err) { // jqXHR: jQuery加强的xhr
                        // textStatus: 请求完成状态
                        // err: 底层经过throw抛出的异常对象，值与错误类型有关
 console.log(arguments); }, //=================== complete============
 complete: function (jqXHR, textStatus) { // jqXHR: jQuery加强的xhr
                    // textStatus: 请求完成状态 success | error
 console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText); console.log('textStatus: %s', textStatus); }, //=================== statusCode============
 statusCode: { '403': function (jqXHR, textStatus, err) { console.log(arguments); //注意：后端模拟errror方式：HttpResponse.status_code=500
 }, '400': function () { } } }) }) </script>
</body>
</html>

import json,time def index(request): return render(request,"index.html") def handle_Ajax(request): username=request.POST.get("username") password=request.POST.get("password") print(username,password) time.sleep(10) return HttpResponse(json.dumps("Error Data!"))

2、$.ajax参数

请求参数：html

######################------------data---------################
 data: 当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式 (urlencoded:?a=1&b=2)发送给服务端；此外，ajax默认以get方式发送请求。 function testData() { $.ajax("/test",{     //此时的data是一个json形式的对象 data:{ a:1, b:2 } }); //?a=1&b=2
######################------------processData---------################
 processData：声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false， 那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString() ,最后获得一个［object，Object］形式的结果。 ######################------------contentType---------################
 contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。 用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；若是想以其余方式提交数据， 好比contentType:"application/json"，即向服务器发送一个json字符串： $.ajax("/ajax_get",{ data:JSON.stringify({ a:22, b:33 }), contentType:"application/json", type:"POST", }); //{a: 22, b: 33} 注意：contentType:"application/json"一旦设定，data必须是json字符串，不能是json对象 views.py: json.loads(request.body.decode("utf8")) ######################------------traditional---------################
 traditional：通常是咱们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]}, traditional为false会对数据进行深层次迭代；

响应参数：前端

dataType： 预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后，传递给回调函数。 默认不须要显性指定这个属性，ajax会根据服务器返回的content Type来进行转换； 好比咱们的服务器响应的content Type为json格式，这时ajax方法就会对响应的内容 进行一个json格式的转换，if转换成功，咱们在success的回调函数里就会获得一个json格式 的对象；转换失败就会触发error这个回调函数。若是咱们明确地指定目标类型，就可使用 data Type。 dataType的可用值：html｜xml｜json｜text｜script 见下dataType实例

from django.shortcuts import render,HttpResponse from django.views.decorators.csrf import csrf_exempt # Create your views here.

import json def login(request): return render(request,'Ajax.html') def ajax_get(request): l=['alex','little alex'] dic={"name":"alex","pwd":123} #return HttpResponse(l) #元素直接转成字符串alexlittle alex
    #return HttpResponse(dic) #字典的键直接转成字符串namepwd
    return HttpResponse(json.dumps(l)) return HttpResponse(json.dumps(dic))# 传到前端的是json字符串,要想使用,须要JSON.parse(data)

//--------------------------------------------------- function testData() { $.ajax('ajax_get', { success: function (data) { console.log(data); console.log(typeof(data)); //console.log(data.name); //JSON.parse(data); //console.log(data.name); }, //dataType:"json", } )} 注解:Response Headers的content Type为text/html,因此返回的是String;但若是咱们想要一个json对象 设定dataType:"json"便可,至关于告诉ajax方法把服务器返回的数据转成json对象发送到前端.结果为object 固然， return HttpResponse(json.dumps(a),content_type="application/json") 这样就不须要设定dataType:"json"了。 content_type="application/json"和content_type="json"是同样的！

3、csrf跨站请求伪造

$.ajaxSetup({java

　　 data: {csrfmiddlewaretoken: '{{ csrf_token }}' },

});

<form>jquery

{% csrf_token %}

</ form >

< br >< br >< br >

$.ajax({< br >...< br >data:{"csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val();}<br>})

<script src="{% static 'js/jquery.cookie.js' %}"></script>ajax

$.ajax({django

　　headers:{"X-CSRFToken":$.cookie('csrftoken')},

})

https://www.cnblogs.com/yuanchenqi/articles/7638956.htmljson

4、示例

要掌握的 //js: 字符串 数组 object{}

编码方式：
 url-encode form-data application/json

form / ajax 
 1.默认: Content-Type: application/x-www-form-urlencoded, 
 请求体中：
 user=yuan&pwd=123 
 request.POST: 
 post: <QueryDict: {'user': ['yuan'], 'pwd': ['123']}>
 
 2.上传文件：enctype="multipart/form-data"
 formdate = new FormData();
 请求体中：
 ------WebKitFormBoundaryFTMqfCmRXmFBlfK4
 Content-Disposition: form-data; name="user"
 
 yuan
 ------WebKitFormBoundaryFTMqfCmRXmFBlfK4
 Content-Disposition: form-data; name="pwd"
 
 123
 ------WebKitFormBoundaryFTMqfCmRXmFBlfK4--
 
 3.contentType:'application/json', 
 请求体中：
 {"a":1,"b":2}
 接收数据：
 request.POST，request.GET 收不到数据！！
 request.body，才能收到！！ 
 dic = json.loads(request.body.decode('utf-8'))
 
 为何？
 request.body 源数据都在这里
 body: b'{"a":1,"b":2}'
 
 django: wsgi 只对 url-encode 转，所以：request.POST 才能拿到数据！
 对于json，wsgi不转，须要咱们从body中拿数据。

参数：后端

<script src="/static/js/jquery.cookie.js"></script>

headers:{"X-CSRFToken":$.cookie('csrftoken')},
contentType:'application/json', 
dataType:'json', # 拿到数据后，json解析数据，若没有，就是str 

success:function (data) {}
error:function (data) {}
finally:function (data) {}

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

<form action="" method="post"> {% csrf_token %} <input type="text" name="user">
    <input type="text" name="pwd">
    <input type="submit">
</form>

<hr>

<button class="btn">click</button>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/static/js/jquery.cookie.js"></script>
<script type="text/javascript"> $('.btn').click(function () { $.ajax({ headers:{"X-CSRFToken":$.cookie('csrftoken')}, url:'/test/', type:'POST', contentType:'application/json', data:JSON.stringify({a:1,b:2,'csrfmiddlewaretoken':$("[name='csrfmiddlewaretoken']").val()}), dataType:'json', success:function (data) { // json 字符串 。。。
 console.log(data); console.log(typeof data) }, error:function (data) { console.log('error',data) }, finally:function (data) { console.log('finally',data) } }) }); </script>

</body>
</html>

def test(request): if request.method == 'POST': print("post:",request.POST) print("get:",request.GET) print("files:",request.FILES) print("body:",request.body) import json dic = json.loads(request.body.decode('utf-8')) print(dic['a']) print(dic) # return HttpResponse('OK')
 info = {'name':'alex'} return HttpResponse(json.dumps(info)) # return HttpResponse("{'name':'alex'}")

    return render(request,'test.html')