为了账号安全,请及时绑定邮箱和手机立即绑定

请问Django 该怎样传数据给HTML页面的ajax?

/ 猿问

请问Django 该怎样传数据给HTML页面的ajax?

当年话下 2019-09-20 15:14:45

Django 怎样传数据给HTML页面的ajax


查看完整描述

5 回答

?
蓝山帝景

Django传数据给HTML页面的ajax的方法是通过load方法传入的。
举例:ajax.html
<html>
<head>
<meta charset="utf-8" />
<title>ajax test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(function($){
$('button').click(function(){
$name = $(this).attr('name');
$('#out').empty().load('/ajax_deal/',{ name : $name });
});
});
</script>
<style type="text/css"></style>
</head>
<body>
<button id="btn-1" name="1">1</button>
<button id="btn-2" name="2">2</button>
<button id="btn-3" name="3">3</button>
<div id="out"></div>
</body>
</html>
设置下路由:url(r'^ajax_deal/$','jobs.views.ajax_deal'),创建名为jobs的app
/opt/django/webproject/jobs
处理函数:
def ajax_deal(request):
return HttpResponse("hello")


查看完整回答
反对 回复 2019-09-22
?
富国沪深

这个在python里有些费解。经常出错。你要明白,django缺省使用unicode。如果你使用str类型。它会自动给你转换。这是python自动转换。不过在windows下,缺省它用GBK, 有时候会出错。


你这个环境正好是windows。 英文进行encode('utf-8')没有问题。


我建议你在文件前面加上一个coding:utf-8


然后将这句改成

12assert(type(file_name)==unicode)fpath=u'D:/texthub/texthub/site_media/upload/'+file_name.encode('gb18030')


你自己试验一下。



查看完整回答
反对 回复 2019-09-22
?
HUWWW

首先需要用下面的装饰器把POST数据的解析器改为MultiPartParser,其中picture的file字段是个FieField或者它的子类。

123456789@api_view(['POST'])@parser_classes((MultiPartParser,))def upload_picture(request):    if "file" in request.FILES:        = request.FILES["file"]        picture = Picture()        picture.file = f        picture.save()        return Response(data={"id":picture.id})


查看完整回答
反对 回复 2019-09-22
?
ibeautiful

方式一:通过form表单中,html input 标签的“file”完成

1
2
3
4
5
6

# 前端代码uoload.html
<form method="post" action="/upload/" enctype="multipart/form-data">
<input id="user" type="text" name="user" />
<input id='img' type="file" name="img" />
<input type="submit" />
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 后端代码
def upload(request):
if request.method == 'POST':
ret = {'status': False, 'data': None, 'error': None}
try:
user = request.POST.get('user')
img = request.FILES.get('img')
f = open(os.path.join('static', img.name), 'wb')
for chunk in img.chunks(chunk_size=1024):
f.write(chunk)
ret['status'] = True
ret['data'] = os.path.join('static', img.name)
except Exception as e:
ret['error'] = e
finally:
f.close()
return HttpResponse(json.dumps(ret))
return render(request, 'upload.html')

方法二:利用XmlHttpRequest对象,发送原生的Ajax请求
(这种方法不能发送文件,需要依赖另外一个对象FormData)
XmlHttpRequest对象的主要属性和方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<input type="button" value="XMLHttpRequest按钮" onclick="XHRAjax();">

<script>
function XHRAjax() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () { # 回调函数--每当请求变化时,都会被触发,比如:创建、open、send、recv等。
if(xhr.readyState == 4){ # 仅当服务器数据全部返回时触发
var data = xhr.responseText;
console.log(data)
}
};
// GET请求
// xhr.open('GET', '/xhr_ajax?p=123');
// xhr.send();
// POST请求
xhr.open('POST', '/xhr_ajax/'); # 这里的URL必须加斜杠结尾。 发送post请求的时候必须携带请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
// 发送请求
xhr.send('n1=1;n2=2;');
};
</script>

1
2
3
4

def ajax(request):
import time
current_time = time.time()
return render(request, 'ajax.html', {'current_time': current_time})

上述的内容,已经可以完成原生ajax的发送。 如果需要发送文件,则需要借助于FormData对象.下边介绍一下FormData的简单用法

1
2
3

# 前端代码

<input type="button" value="XMLHttpRequest-FormData按钮" onclick="XHRAjaxForm();">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 后端代码: 基于FormData对象发送请求
function XHRAjaxForm() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
var data = xhr.responseText;
console.log(data)
}
};
xhr.open('POST', '/xhr_ajax/');
// 发送请求
var form = new FormData(); # 创建FormData对象
form.append('user', 'alex');
form.append('pwd', '123');
xhr.send(form);
};

上面的例子,简单的介绍了FormData的用法 。下边的案例介绍如何使用formdate对象来上传文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 前端部分
<a onclick="uploadfile1();" style="cursor: pointer; display: inline-block;background-color: aqua">XMLHttpRequet上传</a>

# JS部分
<script>
function uploadfile1() {
var form = new FormData();
form.append('user', document.getElementById('user').value);

var fileobj = document.getElementById('img').files[0];
form.append('img', fileobj);

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
var data = xhr.responseText;
console.log(data)
}
};
xhr.open('post', '/upload/', true)
xhr.send(form);
}
</script>

方法三:利用JQuery Ajax + FormData进行文件上传
Jquery转换为dom对象:$("#img")[0].files[0]; 其中$("#img")是jquery对象, $("#img")[0]是dom对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<a onclick="uploadFile2();" style="cursor: pointer; display: inline-block;background-color: aqua">JQuery-Ajax上传</a>

<script>

function uploadFile2() {
var fileobj = $("#img")[0].files[0];
console.log(fileobj);
var form = new FormData();
form.append("img", fileobj);
form.append("uesr", 'alex');
$.ajax({
type: 'POST',
url: '/upload/',
data: form,
processData: false, # 告诉jquery要传输data对象
contentType: false, # 告诉jquery不需要增加请求头对于contentType的设置
success: function (arg) {
console.log(arg)
}
})
}
</script>

方法四:基于Iframe 实现伪Ajax 上传文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<a onclick="uploadFile3();" style="cursor: pointer; display: inline-block;background-color: aqua">IFrame上传</a>

<script>
function uploadFile3() {
// target 是个name的属性值,而不是id
$("#container").find('img').remove();
document.getElementById("my_iframe").onload = callback;
document.getElementById('fo').target = 'my_iframe';
document.getElementById('fo').submit();
}
function callback() {
var t = $('#my_iframe').contents().find('body').text();
var json_data = JSON.parse(t);
console.log(json_data);
if(json_data.status){
// 上传成功
var tag = document.createElement('img');
tag.src = "/" + json_data.data;
tag.className = 'img';
$('#container').append(tag);

}else{
// 上传失败
console.log(status.error);
}

}
</script>

不是所有的浏览器都可以兼容FormData对象。为了兼容性,引出iframe 的用法。
iframe可以建立一个通道发送请求,利用iframe局部刷新的特性实现目标。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 前端代码
<iframe name="my_iframe" style="display: none;" src=""></iframe>
# 这里使用的是name标签,和id标签无关

<a onclick="uploadFile3();" style="cursor: pointer; display: inline-block;background-color: aqua">IFrame上传</a>

<div id="container"></div>

<script>
function uploadFile3() {
// target 是个name的属性值,而不是id
$("#container").find('img').remove();
document.getElementById("my_iframe").onload = callback; # 通过js手动绑定一个事件
document.getElementById('fo').target = 'my_iframe'; # 这里target对应的是一个iframe 的name属性
document.getElementById('fo').submit();
}
function callback() {
var t = $('#my_iframe').contents().find('body').text();
var json_data = JSON.parse(t);
console.log(json_data);
if(json_data.status){  
// 上传成功
var tag = document.createElement('img');
tag.src = "/" + json_data.data;
tag.className = 'img';
$('#container').append(tag);

}else{
// 上传失败
console.log(status.error);
}

}

</script>





查看完整回答
反对 回复 2019-09-22
?
慕哥6287543

upload_to配置  可以指定一个固定的路径,upload_to=' app-name'  可以指定一个strftime()格式化标签,Django会自动处理成指定格式的日期字符串,如: file = models.FileField(upload_to="photos/%Y/%m/%d") 则文件存储的时候...

查看完整回答
反对 回复 2019-09-22

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信