Django - Ajax - 参数
Posted Alice的小屋
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Django - Ajax - 参数相关的知识,希望对你有一定的参考价值。
一、Jquery实现Ajax
url type data success error complete statusCode
{% 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!"))
二、$.ajax参数
请求参数:
######################------------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"是一样的!
三、csrf跨站请求伪造
$.ajaxSetup({
data: {csrfmiddlewaretoken:
\'{{ csrf_token }}\'
},
});
<
form
>
{% csrf_token %}
</
form
>
<
br
><
br
><
br
>
$.ajax({<
br
>...<
br
>data:{"csrfmiddlewaretoken":$("[name=\'csrfmiddlewaretoken\']").val();
}<
br
>})
<
script
src="{% static \'js/jquery.cookie.js\' %}"></
script
>
$.ajax({
headers:{"X-CSRFToken":$.cookie(\'csrftoken\')},
})
https://www.cnblogs.com/yuanchenqi/articles/7638956.html
四、示例
要掌握的 //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\')
以上是关于Django - Ajax - 参数的主要内容,如果未能解决你的问题,请参考以下文章
html PHP代码片段: - AJAX基本示例:此代码演示了使用PHP和JavaScript实现的基本AJAX功能。