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>})
<scriptsrc="{% 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 - 参数的更多相关文章
- ajax参数补充
ajax参数补充 contentType 当我们使用form表单提交数据时,有一个enctype属性,默认情况下不写 此时我们提交数据时,会默认将数据以application/x-www-form-u ...
- django AJAX 的应用
目录 AJAX 的使用 AJAX简介 AJAX常见应用情景 AJAX的优缺点 jQuery实现的AJAX JS实现AJAX AJAX请求如何设置csrf_token Form表单上传文件 AJAX上传 ...
- Django——Ajax相关
Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数 ...
- Django ajax MYSQL Highcharts<1>
Another small project with django/Ajax/Mysql/Highcharts. 看下效果图 - delivery dashboard .嘿嘿 是不是还蛮好看的. 废 ...
- JQuery中的AJAX参数详细介绍
Jquery中AJAX参数详细介绍 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方 ...
- 转载 Jquery中AJAX参数详细介绍
Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ...
- django ajax练习
这几天遇到了django ajax请求出错的问题,总结一下 前端js:我这里创建的是一个字典格式的数据,前端js收到字典之后也是要用字典的形式去解包后台传送过来的数据,比如我下面的写法:data['s ...
- jquery $.ajax({});参数详解
用到过的: type:请求方式,默认 GET: url:请求路径: data:请求参数,类型是String:JSON.stringify({"name":tom,"age ...
- ajax参数
$.ajax({ type: "GET", url: "Login.ashx", dataType: "text", cache: fals ...
随机推荐
- perl File::Spec 模块
File::Spec 模块提供了很多的功能,这里只列举几个常用的函数 rel2abs : 返回一个文件的绝对路径, 常见用法,返回当前运行的perl脚本的绝对路径 代码示例: my $prog = F ...
- Windows 上 GitHub Desktop 的操作[转]
第1章 上传开源代码至GitHub 1 1.1 git Windows 客户端 1 1.2 注册GitHub账户 2 1.3 登录 2 1.4 创建本地代码仓库 2 1. ...
- linux下如何关闭防火墙、查看当前的状态、开放端口
从配置菜单关闭防火墙是不起作用的,索性在安装的时候就不要装防火墙查看防火墙状态:/etc/init.d/iptables status暂时关闭防火墙:/etc/init.d/iptables stop ...
- JS中函数声明与函数表达式的异同
相同点 注:函数声明和函数表达式的相同点包括但不限于以下几点 函数是一个值,所以和其他值一样,函数也可以进行被输出.被赋值.作为参数传给其他函数等相关操作,不管函数是以什么方式被定义的,当然和其他值的 ...
- VC++：制作一个控件注册的小工具
在平时的工作中,时常需要注册与反注册ActiveX控件,有时需要判断控件是否已经注册. 所以通过查找资料编写了一个控件注册的小工具,欢迎学习交流,不当之处请多多交流. 先直接上图: 主要代码: ...
- mysqldump工具,工作的本质是什么呢?(dump表的时候,是否会产生drop表的语句)
需求描述: 今天在看mysqldump工具的使用过程,发现一个同事,是这样写的mysqldump命令 mysqldump -uroot -pmysql employees titles | mysql ...
- Spring Framework 官方文档学习（四）之Validation、Data Binding、Type Conversion（二）
接前一篇 Spring Framework 官方文档学习(四)之Validation.Data Binding.Type Conversion(一) 本篇主要内容:Spring Type Conver ...
- Don‘t talk.Just do it.
对于算法,自己掌握的还是不多.并且我发现对于一个算法的理解非常重要.也许你会发现你貌似会用某总算法但是,他一旦变形,自己就无从下手. 还有就是对于算法.最好每次都自己敲,这样不仅能添加对于算法的熟度. ...
- JBPM4.4_jBPM4.4的流程定义语言（设计流程）
1. jBPM4.4的流程定义语言(设计流程) 1.1. process(流程) 是.jpdl.xml的根元素,可以指定的属性有: 属性名 作用说明 name 流程定义的名称,用于显示. key 流程 ...
- POJ 2392 Space Elevator(多重背包变形)
Q: 额外添加了最大高度限制, 需要根据 alt 对数据进行预处理么? A: 是的, 需要根据 alt 对数组排序 Description The cows are going to space! T ...