ajax与文件上传
程序员文章站
2024-01-04 20:07:22
一、ajax ajax（Asynchronous JavaScript And XML）：异步JavaScript和XML，即使用JavaScript语句与服务器进行异步交互，传输的数据为XML（也可以是json数据）。实际上就是在JavaScript语句里用ajax可以向服务器发送请求。 两大特点 ......
一、ajax
ajax（asynchronous javascript and xml）：异步javascript和xml，即使用javascript语句与服务器进行异步交互，传输的数据为xml（也可以是json数据）。实际上就是在javascript语句里用ajax可以向服务器发送请求。
两大特点：
1，异步交互
2，页面局部刷新
语法：
基于jquery：
<script>
$('.cc').click(function(){ #当我们点击‘.cc’这个类的时候就会触发ajax请求 $.ajax({ url:'/name/', #请求的路径 type:'post', #请求的方式 data:{csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val(),user:$('[name="user"]').val()}, #请求的数据 success:function (data) { #这是请求成功后的回调函数 if (data.name){ $('.c1').html('用户名已存在'); $('.login').addclass('hide') } } }) }); </script>
1，基于ajax请求的注册页面
1.1 register.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="/static/css/bootstrap.css">
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/js/bootstrap.js"></script>
</head>
<body>
{% csrf_token %}
<div class="container">
{% csrf_token %}
<div class="row">
<div class="col-md-5">
<div style="color: blue;font-size: 20px">注册页面</div>
<div>
名字 <input type="text" name="user" class="form-control"><span class="c1" style="color: red"></span>
</div>
<div >
密码 <input type="password" name="pwd" class="form-control"><span class="c2" style="color: red"></span>
</div>
<button class="register">注册</button>
</div>
</div>
</div>
<script>
$('[name="user"]').focus(function () {
$('.c1').html('');
$('.register').removeclass('hide')
});
$('[name="pwd"]').focus(function () {
$('.c2').html('');
$('.register').removeclass('hide')
});
$('[name="user"]').blur(function () {
$.ajax({
url:'/name/',
type:'post',
data:{csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val(),user:$('[name="user"]').val()},
success:function (data) {
if (data.name){
$('.c1').html('用户名已存在');
$('.register').addclass('hide')
}
}
})
});
$('[name="pwd"]').blur(function () {
var pwd=$(this).val();
if (pwd.length < 10){
$('.c2').html('长度小于10');
$('.register').addclass('hide')
}
});
$('.register').click(function () {
var name = $('[name="user"]').val();
var pw = $('[name="pwd"]').val();
$.ajax({
url: '/registr/',
type: 'post',
data: {csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val(), user: name, pwd: pw},
success: function (data) {
if (data.state) {
location.href = '/login/'
}
else {
$('p').html('注册不成功')
}
}
})
})
</script>
</body>
1.2 views.py
def registr(request):
if request.method=='get':
return render(request, 'registr.html')
else:
dic={'state':none}
name=request.post.get('user')
pwd=request.post.get('pwd')
obj=userinfo.objects.create(name=name,pwd=pwd)
if obj:
dic['state']=true
return jsonresponse(dic)
def name(request):
dic={'name':none}
name=request.post.get('user')
obj=userinfo.objects.filter(name=name).first()
if obj :
dic['name']=true
return jsonresponse(dic)
1.3 呈现出来的页面
当我们在名字栏输入数据后并且失去焦点后，就会触发一个ajax请求，它会把写在名字栏的数据发到服务器，服务器从数据库判断是否用户名已经存在，然后给ajax返回一个结果。这整个过程中，页面是不会刷新的。只是通过javascript在页面上添加节点而已
二、文件上传
1,请求头contenttype：指的请求体的打包方式，总共有三种类型
1.1 application/x-www-form-urlencoded
这是post请求方式最常见的打包方式，如果不进行设置，都会默认这种打包方式。浏览器的原生form表单，如果不设置enctype属性，就默认这种方式打包数据。
user=alex&pwd=123 这就是这种方式打包后的数据结构
1.2 multipart/from-data
基于form表单上传文件，就必须让form表单的enctype等于multipart/form-data
基于ajax上传文件时，我们就要用到formdata类
$('.submit').click(function () {
var formdata=new formdata();
formdata.append('file',$('.file')[0].files[0]); #插入上传文件的内容
$.ajax({
url:'/file/',
type:'post',
contenttype:false, #这一句和下一句是必须加上的
processdata:false,
data:formdata,
success:function (data) {
$('.c1').html(data)
}
})
})
1.3 application/json
在用ajax请求时，可以把contenttype改成json，但此时的数据类型就必须json数据类型
如果不用json类型打包的话，ajax也会默认urlencoded模式打包，数据书写格式为：
data：{user:'hh',pwd:123}
但当设置contenttype='json'，此时数据打包方式就变了，数据必须是json格式，所以现在该如下面这样写
data：json.strinigfy({user:'hh',pwd:123})
2，基于form表单的文件上传
2.1 html文件
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" name="file">
<input type="submit">
</form>
2.2 视图
def file(request):
if request.method=='get':
return render(request,'file.html')
else:
file_obj=request.files.get('file')
name=file_obj.name
with open(os.path.join('imgs',name),'wb') as f:
for line in file_obj:
f.write(line)
return httpresponse('上传成功')
3，基于ajax的文件上传
3.1 html文件
<input type="file" class="file">
<input type="button" class="submit" value="submit">
<p class="c1"></p>
<script>
$('.submit').click(function () {
var formdata=new formdata();
formdata.append('file',$('.file')[0].files[0]);
$.ajax({
url:'/file/',
type:'post',
contenttype:false,
processdata:false,
data:formdata,
success:function (data) {
$('.c1').html(data)
}
})
})
</script>
3.2 视图
def file(request):
if request.method=='get':
return render(request,'file.html')
else:
file_obj=request.files.get('file')
name=file_obj.name
with open(os.path.join('imgs',name),'wb') as f:
for line in file_obj:
f.write(line)
return httpresponse('上传成功')