原文地址： http://www.cnblogs.com/tugenhua0707/p/8975615.html　　

FormData和Payload是浏览器传输给接口的两种格式，这两种方式浏览器是通过Content-Type来进行区分的(了解Content-Type)，如果是 application/x-www-form-urlencoded的话，则为formdata方式，如果是application/json或multipart/form-data的话，则为 request payload的方式。

　　比如如下使用ajax方式的提交post请求的代码（默认使用application/x-www-form-urlencoded编码）：

<!DOCTYPE html>

<html>

<head>

  <title></title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

  <script type="text/javascript" src="https://tugenhua0707.github.io/html5UploadImage/js/jquery.js"></script>

</head>

<body>

  <div id="app">

    <div class="btn">发送post请求</div>

  </div>

  <script>

    var obj = {

      "name": 'CntChen',

      "info": 'Front-End',

    };

    $('.btn').click(function() {

      $.ajax({

        url: 'www.example.com',

        type: 'POST',

        dataType: 'json',

        data: obj,

        success: function(d) {

        }

      })

    });

  </script>

</body>

</html>

　　如下图所示：

　　2. 使用 multipart/form-data表单上传文件

　　如下html代码：

<!DOCTYPE html>

<html>

<head>

  <title></title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

</head>

<body>

  <div id="app">

    <form action="http://www.example.com" method="POST" enctype="multipart/form-data">

      <p>username: <input type="text" name="fname" /></p>

      <p>age: <input type="text" name="age" /></p>

      <input type="submit" value="提交" />

    </form>

  </div>

</body>

</html>

　　如下图所示：

　　可以看到 使用multipart/form-data表单上传文件时使用的是 Request Payload 格式；

　　3. 使用 Content-Type: application/json 来编码

　　如下html代码：

<!DOCTYPE html>

<html>

<head>

  <title></title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

  <script type="text/javascript" src="https://tugenhua0707.github.io/html5UploadImage/js/jquery.js"></script>

</head>

<body>

  <div id="app">

    <div class="btn">发送post请求</div>

  </div>

  <script>

    $('.btn').click(function() {

      $.ajax({

        url: 'http://localhost:8081/api.json',

        type: 'POST',

        dataType: 'json',

        contentType: 'application/json',

        data: JSON.stringify({a: [{b:1, a:1}]}),

        success: function(d) {

        }

      })

    });

  </script>

</body>

</html>

　　如下图所示

　　

　　

  1. 如果请求头里设置Content-Type: application/x-www-form-urlencoded，那么这个请求被认为是表单请求，参数出现在Form Data里，格式为key=value&key=value&key=value...。后端可以通过request.getParameter(name)的形式来获取表单参数。

  2. 原生的AJAX请求头里设置Content-Type:application/json，或者使用默认的请求头Content-Type:text/plain;参数会显示在Request payload块里提交。

　　  后端可以通过request.getParameter(name)的形式来获取表单参数。

private String getStringFromStream(HttpServletRequest req) {

		ServletInputStream is;

　　　　try {

	　　　　is = req.getInputStream();

	       int nRead = 1;

	       int nTotalRead = 0;

	       byte[] bytes = new byte[10240];

	       while (nRead > 0) {

		    nRead = is.read(bytes, nTotalRead, bytes.length - nTotalRead);

		    if (nRead > 0)

			nTotalRead = nTotalRead + nRead;

		}

		String str = new String(bytes, 0, nTotalRead, "utf-8");

		return str;

	} catch (IOException e) {

		e.printStackTrace();

		return "";

	}

｝

　　

HTTP请求中 request payload 和 formData 区别？的更多相关文章

  1. Http请求中POST与GET的区别——前端面试

    一.原理区别 Http定义了与服务器交互的方法,其中最基本的四种是:GET,POST,PUT,DELETE,正对应着对资源的查,改,增,删.URL的全称是资源描述符,我们可以这样认为,一个URL地址, ...

  2. HTTP请求中GET和POST的区别

    一.原理区别 一般我们在浏览器输入一个网址访问网站都是GET请求;再FORM表单中,可以通过设置Method指定提交方式为GET或者POST提交方式,默认为GET提交方式. HTTP定义了与服务器交互 ...

  3. HTTP请求中POST与GET的区别

      本文章已收录于:   一.原理区别 一般我们在浏览器输入一个网址访问网站都是GET请求;再FORM表单中,可以通过设置Method指定提交方式为GET或者POST提交方式,默认为GET提交方式. ...

  4. JavaWEB HTTP请求中POST与GET的区别

    From 的get 和post方法.在数据传输过程中分别对应了HTTP协议中的GET和POST方法. 二者主要区别: GET从服务其获取数据;POST上传数据. GET将表单中的数据按照variabl ...

  5. Servlet中Request的getAttribute getParameter 区别

    1.从更深的层次考虑,request.getParameter()方法传递的数据,会从Web客户端传到Web服务器端,代表HTTP请求数据. request.getParameter()方法返回Str ...

  6. vue post 请求 是 request payload 而不是 FromData ，以及 格式转换成 FromData 需要的 key value 格式

    export function 方法名字(传进来要给后端的参数){     return request({         url : ' 后端提供的接口路径  ',         method  ...

  7. python request Payload 数据处理

    普通的http的post请求的请求content-type类型是:Content-Type:text/html; charset=UTF-8, 而另外一种形式request payload,其Cont ...

  8. 浅谈HTTP中Get与Post的区别_转

    可参考:HTTP请求中POST与GET的区别 Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个UR ...

  9. 【转】HTTP请求中的form data和request payload的区别

    jQuery的ajax方法和post方法分别发送请求,在后台Servlet进行处理时结果是不一样的,比如用$.ajax方法发送请求时(data参数是一个JSON.stringify()处理后的字符串, ...

随机推荐

  1. HTML5 FormData方法介绍

    详细见链接 转载说明:转自CSDN上“诗渊”的博客

  2. select * from 后有多个表的使用方法

    已知一个表的结构为: ------------------- 姓名 科目 成绩 张三 语文 20 张三 数学 30 张三 英语 50 李四 语文 70 李四 数学 60 李四 英语 90   怎样通过 ...

  3. eXosip sip

    eXosip是对osip的封装,是对sip协议的使用更简单.osip是gnu开源的sip协议实现. 介绍: http://savannah.nongnu.org/projects/exosip 下载地 ...

  4. canvas绘图基础

    <canvas>元素是HTML5中的绘图元素,通过定义一个画布区域,然后使用javascript动态地在这个区域里面绘制图形,对于2D和3D图形都可以绘制,我们将其分成2D上下文和WebG ...

  5. web项目执行流程

    先扫描web.xml文件 jsp请求servlet servlet  调数据/不调数据 重定向/转发       Dao(封装数据)   Biz(数据处理)     逻辑判段 返回前端界面显示

  6. python项目练习

    程序框图 (消费模块暂未写入) bin:程序执行 import os import sys base_dir = os.path.dirname(os.path.dirname(os.path.abs ...

  7. 除了Udacity，全球最聪明的那群人还上哪些网站？

    01. ***,与世界相连 WikiWand——打开维基百科的新方式 http://www.wikiwand.com/ InsightfulQuestions(subreddit)——跨越界限的智力讨 ...

  8. C语言结构体指针初始化（转）

    reference: https://www.cnblogs.com/losesea/archive/2012/11/15/2772526.html 今天来讨论一下C中的内存管理. 记得上周在饭桌上和 ...

  9. svn提示文件 is already locked

    有时候在提交代码或者更新代码的时候svn会报错误,提示请执行"clean up",但是有时候执行"clean up"也没有什么用,不过当执行"clea ...

  10. npm 基本使用命令

    NMP 本地 远程npm install uglify-js --globalnpm install underscore@1.8.2 指定版本 npm update underscore npm s ...