标签:post提交数据 load 刷新 roc 表单 fun 默认 结束 multi
Ajax(asynchronous JavaScript And XML):异步javascript和xml。即使用javascript语言与服务器进行异步交互,传输的数据是xml(现在大部分都是使用json)
同步交互
Ajax(异步交互):特点
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="/static/jQuery.js"></script>
</head>
<body>
<h2>Index</h2>
<button class="Ajax">ajax</button>
用户名<input type="text" class="inp">
<p></p>
<script>
$(‘.Ajax‘).click(function () {
{# 单击按钮发送ajax请求#}
$.ajax({
{#请求url#}
url:"/test_ajax/",
{#发送类型#}
type:‘get‘,
{#发送的数据#}
{#data:{},#}
{#回调函数:某个函数执行结束后执行的函数#}
success:function (data) {
console.log(data);
$(‘p‘).html(data)
}
})
} )
</script>
</body>
</html>
ContentType指的是请求体的编码类型,常见的类型共有3种:
POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8
user=yuan&age=22
单也只支持这两种方式(通过 元素的 enctype 属性指定,默认为 application/x-www-form-urlencoded。其实 enctype 还支持 text/plain,不过用的非常少
用来告诉服务端消息主体是序列化后的JSON 字符串,目前json使用的是非常非常多的,很多服务端语言都支持json,在服务端进行处理时需要先编码然后再使用json转换为具体的对象
文件上传时需要将form表单的enctype属性设置为multipart/form-data
file_put.html
<form action="" method="post" enctype="multipart/form-data">
用户名<input type="text">
<input type="file">
<input type="submit">
</form>
views.py
def file_put(request):
if request.method == ‘GET‘:
return render(request,‘file_put.html‘)
else:
file_obj = request.FILES.get(‘img‘)
print(file_obj) # <MultiValueDict: {‘user‘: [<InMemoryUploadedFile: miao.jpg (image/jpeg)>]}>
with open(file_obj.name,‘wb‘) as f:
for line in file_obj:
f.write(line)
return HttpResponse(‘OK‘)
视图函数中处理文件与form处理文件一样
<form action="" method="post" enctype="multipart/form-data">
用户名<input type="text" id="user">
<input type="file" id="img">
<input type="button" id="btn" value="ajax">
</form>
<script>
$(‘#btn‘).click(function () {
{#基于ajax上传文件固定格式#}
var formdata = new FormData();
formdata.append(‘user‘,$(‘#user‘).val());
{# $(‘#img‘)[0].files[0] 拿到form表单中的文件#}
formdata.append(‘img‘,$(‘#img‘)[0].files[0]);
$.ajax({
url:‘‘,
type:‘post‘,
{#是否对数据做预处理 固定写法#}
contentType:false,
processData:false,
data:formdata,
success:function (data) {
console.log(data)
}
})
})
</script>
标签:post提交数据 load 刷新 roc 表单 fun 默认 结束 multi
原文地址:https://www.cnblogs.com/wualin/p/10122823.html