ajax与文件上传

程序员文章站 2022-04-04 14:33:27

一、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请求，它会把写在名字栏的数据发到服务器，服务器从数据库判断是否用户名已经存在，然后给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('上传成功')

上一篇：你给我找的儿媳妇呢

下一篇：栈的简单应用-行编辑

ajax与文件上传

一、ajax

1，基于ajax请求的注册页面

二、文件上传

1,请求头contenttype：指的请求体的打包方式，总共有三种类型

2，基于form表单的文件上传

3，基于ajax的文件上传

php上传文件的增强函数_PHP教程

PHP判断上传文件类型的解决办法，

PHP上传下载文件源码

php实现上传图片文件代码_PHP

Ajax异步上传文件实例代码分享

PHP实现多文件上传的方法

fckeditor上传文件按日期存放及重命名上传文件的方法

静态文件服务器A和web应用服务器B分开，怎么样在B服务器上传的图片，上传到静态文件服务器应用是PHP写的？

多文件上传的例子

经典的PHP文件上传类