zoukankan      html  css  js  c++  java
  • 关于AJAX与form表单提交数据的格式

    一 form表单传输文件的格式:

    只有三种:

    multipart/form-data 一般用于传输文件,图片文件或者其他的。

    那么其中我们默认的是application/x-www-form-urlencoded  用于传输字符串。

    text/plain是我们几乎不用的。

    二  AJAX各种格式都可以:通过AJAX传输数据我们可以传输各种数据,那么只需要我们在服务端对数据进行相应的解析。

    三:那么我们在服务端取到数据,body中是我们发送的文件的bytes类型,所以所有的数据都能取到。

    request.POST 只能解析urlencoded格式的数据
    
    request.body  所有的经过post发送的数据都能通过body取到

    四 浏览器只能解析:HTML,css,js 三种文件。

    五 关于form表单与AJAX发送数据的形式:

    请求头中的ContentType:

    ContentType指的是请求体的编码类型,常见的类型共有3种:

    1 application/x-www-form-urlencoded

    这应该是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单,如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样(无关的请求头在本文中都省略掉了):

    POST http://www.example.com HTTP/1.1
    Content-Type: application/x-www-form-urlencoded;charset=utf-8
    
    user=yuan&age=22

    2 multipart/form-data

    这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时,必须让 <form> 表单的 enctype 等于 multipart/form-data。直接来看一个请求示例:

    复制代码
    POST http://www.example.com HTTP/1.1
    Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA
    
    ------WebKitFormBoundaryrGKCBY7qhFd3TrwA
    Content-Disposition: form-data; name="user"
    
    yuan
    ------WebKitFormBoundaryrGKCBY7qhFd3TrwA
    Content-Disposition: form-data; name="file"; filename="chrome.png"
    Content-Type: image/png
    
    PNG ... content of chrome.png ...
    ------WebKitFormBoundaryrGKCBY7qhFd3TrwA--
    复制代码

    这个例子稍微复杂点。首先生成了一个 boundary 用于分割不同的字段,为了避免与正文内容重复,boundary 很长很复杂。然后 Content-Type 里指明了数据是以 multipart/form-data 来编码,本次请求的 boundary 是什么内容。消息主体里按照字段个数又分为多个结构类似的部分,每部分都是以 --boundary 开始,紧接着是内容描述信息,然后是回车,最后是字段具体内容(文本或二进制)。如果传输的是文件,还要包含文件名和文件类型信息。消息主体最后以 --boundary-- 标示结束。关于 multipart/form-data 的详细定义,请前往 rfc1867 查看。

    这种方式一般用来上传文件,各大服务端语言对它也有着良好的支持。

    上面提到的这两种 POST 数据的方式,都是浏览器原生支持的,而且现阶段标准中原生 <form> 表单也只支持这两种方式(通过 <form> 元素的 enctype 属性指定,默认为 application/x-www-form-urlencoded。其实 enctype 还支持 text/plain,不过用得非常少)。

    随着越来越多的 Web 站点,尤其是 WebApp,全部使用 Ajax 进行数据交互之后,我们完全可以定义新的数据提交方式,给开发带来更多便利。

    3 application/json

    application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上,现在越来越多的人把它作为请求头,用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行,除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify,服务端语言也都有处理 JSON 的函数,使用 JSON 不会遇上什么麻烦。

    JSON 格式支持比键值对复杂得多的结构化数据,这一点也很有用。记得我几年前做一个项目时,需要提交的数据层次非常深,我就是把数据 JSON 序列化之后来提交的。不过当时我是把 JSON 字符串作为 val,仍然放在键值对里,以 x-www-form-urlencoded 方式提交。

    基于form表单的文件上传 

    模板

    <form action="" method="post" enctype="multipart/form-data">
          用户名 <input type="text" name="user">
          头像 <input type="file" name="avatar">
        <input type="submit">
    </form>

    视图部分

    复制代码
    def index(request):
        print(request.body)   # 原始的请求体数据
        print(request.GET)    # GET请求数据
        print(request.POST)   # POST请求数据
        print(request.FILES)  # 上传的文件数据
    
    
        return render(request,"index.html")
    复制代码

    基于Ajax的文件上传

    模板

    复制代码
    <form>
          用户名 <input type="text" id="user">
          头像 <input type="file" id="avatar">
         <input type="button" id="ajax-submit" value="ajax-submit">
    </form>
    
    <script>
    
        $("#ajax-submit").click(function(){
            var formdata=new FormData();
            formdata.append("user",$("#user").val());
            formdata.append("avatar_img",$("#avatar")[0].files[0]);
            $.ajax({
    
                url:"",
                type:"post",
                data:formdata,
                processData: false ,    // 不处理数据
                contentType: false,    // 不设置内容类型
    
                success:function(data){
                    console.log(data)
                }
            })
    
        })
    
    </script>
    复制代码

    视图

    复制代码
    def index(request):
    
        if request.is_ajax():
    
            print(request.body)   # 原始的请求体数据
            print(request.GET)    # GET请求数据
            print(request.POST)   # POST请求数据
            print(request.FILES)  # 上传的文件数据
    
            return HttpResponse("ok")
    
    
        return render(request,"index.html")
    复制代码

    检查浏览器的请求头:

    1 Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryaWl9k5ZMiTAzx3FT
  • 相关阅读:
    target runtime apache v6.0 not defined解决
    java.lang.AbstractMethodError: javax.servlet.jsp.JspFactory.getJspApplicationContext(Ljavax/servlet/ServletContext;)Ljavax/servlet/jsp/JspApplicationContext;
    The valid characters are defined in RFC 7230 and RFC 3986问题
    invalid END header解决方法
    You have more than one version of ‘org.apache.commons.logging.Log’ visible, which is not allowed问题解决
    Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986
    在eclipse中import java web项目时遇到的一些问题并将该项目通过tomcat发布
    java byte转string 涉及到字节流中有中文
    spring+mybatis框架搭建时遇到Mapped Statements collection does not contain value for...的错误
    试试看读一下Zepto源码
  • 原文地址:https://www.cnblogs.com/zhangsanfeng/p/9335193.html
Copyright © 2011-2022 走看看