在Http请求里post是其中比较常用的提交数据的请求方式,那么接下来就给大家详细讲解下post的几种数据传输格式,以及写法。

Http的请求传输方式很多:

我们着重讲解Post方式。Post请求包含两部分:请求头(header)和请求体(body)。

Post常见的请求体(body)有三种传输内容类型Content-type:application/x-www-form-urlencoded、application/json、multipart/form-data,当然还有其他的几种,不过不常用,常用的就是这三种。

先看第一种:application/x-www-form-urlencoded。

通过Postman可以看到Post请求的参数一般放在Body里。我们的application/x-www-form-urlencoded方式也是Post请求最早支持的一种数据传输方式,这种也是key和value形式,将我们的参数类似于GET方式那样拼接成一个字符串,例如:key1=value1&key2=value2,这种形式,然后将这个参数字符串进行urlencode编码,放到Body里进行发送请求数据。

接下来分别用Java Spring MVC、Android OkHttp、Retrofit、JS Ajax、Nodejs分别演示下这种方式的请求和接口编写:

在Java的Spring MVC中默认的编写Controller接口请求数据传输就是这种方式:application/x-www-form-urlencoded。

package com.web.mvc.controller;

import com.google.gson.FieldAttributes;

import com.google.gson.Gson;

import com.web.mvc.model.Entity;

import com.web.mvc.model.User;

import com.web.mvc.service.EntityService;

import com.web.mvc.service.IEntityService;

import com.web.mvc.utils.RedisUtils;

import com.web.mvc.utils.Utils;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.http.MediaType;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.*;

import java.io.File;

import java.io.IOException;

import java.sql.SQLException;

import org.apache.commons.codec.binary.Base64;

import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;

import java.util.HashMap;

import java.util.List;

//@Controller

@RestController

@RequestMapping("/entity")

public class EntityController {

@Autowired

private IEntityService entityService;

//默认form-urlcoded

@CrossOrigin

@RequestMapping(value = "/urlcodedReq", method = RequestMethod.POST)

@ResponseBody

public String urlcodedReq(@RequestParam String name,

@RequestParam String pwd) {

System.out.println("urlcodedReq:" + name + " " + pwd);

Gson gson = new Gson();

HashMap map = new HashMap<>();

map.put("name", name);

map.put("pwd", pwd);

return gson.toJson(map);

}

}

@CrossOrigin:用来处理支持跨域请求的;

@ResponseBody:作用在方法上,表示请求返回的数据写入http response body里,也就是返回数据,而不是进行页面跳转。

以上就是Java Spring MVC编写Controller Post接口的写法。

接下来看下Android中Retrofit的请求写法:

public interface ApiService {

//application/x-www-form-urlencoded

@FormUrlEncoded

@POST("urlcodedReq")

Call getRepos(@Field("name") String name, @Field("pwd") String pwd);

}

就是加入了@FormUrlEncoded注解即可。

再看下Okhttp发送请求的写法:

public class Utils {

private static String

url = "http://192.168.1.130:8086/entity/urlcodedReq";

public static void okPost() {

OkHttpClient client = new OkHttpClient();

client.newBuilder()

.build();

//application/x-www-form-urlencoded

RequestBody body = new FormBody.Builder()

.add("name", "123")

.add("pwd", "pwd1")

.build();

Request request = new Request.Builder()

.post(body)

.url(url)

.build();

client.newCall(request).enqueue(new Callback() {

@Override

public void onFailure(Call call, IOException e) {

System.out.println("onFailure:" + e.getLocalizedMessage());

}

@Override

public void onResponse(Call call, Response response) throws IOException {

System.out.println("onResponse:" + response.body().string());

}

});

}

}

接下来看下JS中Ajax的写法:

/**

* 原生Ajax POST请求

*/

function getOrigantAjaxPost() {

var stringData='name=value1&pwd=value2'

var oAjax = null;

//这里进行HTTP请求

try {

oAjax = new XMLHttpRequest();

} catch (e) {

oAjax = new ActiveXObject("Microsoft.XMLHTTP");

};

//post方式

oAjax.open('post', 'http://' + hostName + ':' + port + '/entity/urlReq', true);

oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

//post发送数据

oAjax.send(stringData);

oAjax.onreadystatechange = function () {

//当状态为4的时候,执行以下操作

if (oAjax.readyState == 4 && oAjax.status == 200) {

try {

//+ oAjax.responseText

console.log('data:' + oAjax.responseText);

} catch (e) {

// alert('你访问的页面出错了' + e);

};

};

};

}

Jquery Ajax写法:

function getOrigantAjaxPost() {

var stringData = 'name=value1&pwd=value2'

$.ajax({

data: stringData,

async: true,

url: 'http://' + hostName + ':' + port + '/entity/urlReq',

type: "post",

processData: false, //tell jQuery not to process the data

contentType: "application/x-www-form-urlencoded",

success: function (data, status) {

// alert("Data: " + status);

console.log("Data: " + JSON.stringify(data) + " " + status);

},

error: function (e) {

// alert("Data: error" + JSON.stringify(e));

console.log('error ' + JSON.stringify(e));

}

});

}

接下来再看下Nodejs的接口和请求写法:

var http = require("http");

var url = require('url');

var express = require('express')

var bodyParser = require('body-parser');

//设置主机名

var hostName = '192.168.56.1';

//设置端口

var port = 8092;

var app = express()

var urlencodedParser = bodyParser.urlencoded({ extended: false })

routes.post('/url', urlencodedParser, (req, res) => {

//解析参数

var params = req.body;

var user = {};

user.name = params.name;

user.pwd = params.pwd;

var response = { status: 1, data: user };

res.send(JSON.stringify(response));

res.end();

});

Nodejs原生写Post接口解析写法:

const http = require('http');

//用http模块创建一个http服务端

http.createServer(function(req, res) {

if (req.method.toLowerCase() === 'post') {

var body = '';

req.on('data', function(chunk){

body += chunk;

});

req.on('end', function(){

if(req.headers['content-type'].indexOf('application/json')!==-1){

// JSON 格式请求体解析

JSON.parse(body);

} else if(req.headers['content-type'].indexOf('application/octet-stream')!==-1){

// Raw 格式请求体解析

// ……

} else if(req.headers['content-type'].indexOf('text/plain')!==-1){

// text 文本格式请求体解析

// ……

} else if(req.headers['content-type'].indexOf('application/x-www-form-urlencoded')!==-1){

// URL-encoded 格式请求体解析

// ……

} else {

// 其它格式解析

}

})

} else {

res.end('其它提交方式');

}

}).listen(3000);

Nodejs的请求写法:

/**

* 原生POST请求

*/

function urlPost() {

var http = require('http');

var querystring = require('querystring');

var contents = querystring.stringify({

name: 'nameuser',

pwd: '123'

});

var options = {

host: hostName,

port: port,

path: '/entity/req',

method: 'POST',

headers: {

'Content-Type': 'application/x-www-form-urlencoded',

'Content-Length': contents.length

}

}

var req = http.request(options, function (res) {

res.setEncoding('utf8');

res.on('data', function (data) {

console.log("data:", data);//返回数据

});

});

req.write(contents);

req.end();

}

再看第二种:application/json。

application/json也就是告诉我们的服务器我们的消息体内容类型是序列化的JSON字符串,例如:{ "name": "value1", "pwd": "value2" }。获取到这个body直接解析Json格式字符串即可拿到参数数据。

接下来分别用Java Spring MVC、Android OkHttp、Retrofit、JS Ajax、Nodejs分别演示下这种方式的请求和接口编写:

在Java的Spring MVC中编写Controller接口接收解析application/json这种数据格式的需要在注解里定义consumes和produces为application/json类型。

@CrossOrigin

@RequestMapping(value = "/req", method = RequestMethod.POST,

consumes = MediaType.APPLICATION_JSON_VALUE

, produces = MediaType.APPLICATION_JSON_VALUE)

@ResponseBody

public String postReq(@RequestBody User user) {

System.out.println("req:" + user.getName() + " " + user.getPwd());

Gson gson = new Gson();

HashMap map = new HashMap<>();

map.put("name", user.getName());

map.put("pwd", user.getPwd());

return gson.toJson(map);

}

Retrofit定义的话就是要加上@Headers注解,里面声明Content-Type即可。

//application/json

@Headers({"Content-Type: application/json", "Accept: application/json"})

@POST("req")

Call getRepos(@Body Entity entity);

Android OkHttp使用方法如下:

public static void okPost() {

OkHttpClient client = new OkHttpClient();

client.newBuilder()

.build();

//application/json

MediaType mediaType = MediaType.parse("application/json; charset=utf-8");

Gson gson = new Gson();

HashMap map = new HashMap<>();

map.put("name", "name1");

map.put("pwd", "pwd1");

String postString = gson.toJson(map);

RequestBody requestBody = RequestBody.create(mediaType, postString);

Request request = new Request.Builder()

.post(requestBody)

.url(url)

.build();

client.newCall(request).enqueue(new Callback() {

@Override

public void onFailure(Call call, IOException e) {

System.out.println("onFailure:" + e.getLocalizedMessage());

}

@Override

public void onResponse(Call call, Response response) throws IOException {

System.out.println("onResponse:" + response.body().string());

}

});

}

Ajax写法:

/**

* 原生Ajax POST请求

*/

function getOrigantAjaxPost() {

var postData = '{ "name": "value1", "pwd": "value2" }';

var oAjax = null;

//这里进行HTTP请求

try {

oAjax = new XMLHttpRequest();

} catch (e) {

oAjax = new ActiveXObject("Microsoft.XMLHTTP");

};

//post方式

oAjax.open('post', 'http://' + hostName + ':' + port + '/entity/req', true);

oAjax.setRequestHeader("Content-type", "application/json");

//post发送数据

oAjax.send(postData);

oAjax.onreadystatechange = function () {

//当状态为4的时候,执行以下操作

if (oAjax.readyState == 4 && oAjax.status == 200) {

try {

//+ oAjax.responseText

console.log('tryForm:' + oAjax.responseText);

// alert('readyState' + oAjax.status + " "

// + oAjax.responseText);

} catch (e) {

// alert('你访问的页面出错了' + e);

};

};

};

}

Jquery Ajax写法:

/**

* 原生Ajax POST请求

*/

function getOrigantAjaxPost() {

var postData = '{ "name": "value1", "pwd": "value2" }';

$.ajax({

data: postData,

async: true,

url: 'http://' + hostName + ':' + port + '/entity/req',

type: "post",

processData: false, //tell jQuery not to process the data

contentType: "application/json", //tell jQuery not to set contentType

success: function (data, status) {

// alert("Data: " + status);

console.log("Data: " + JSON.stringify(data) + " " + status);

},

error: function (e) {

// alert("Data: error" + JSON.stringify(e));

console.log('error ' + JSON.stringify(e));

}

});

}

Nodejs的接口写法,只是变成bodyParser.json即可:

var urlencodedParser = bodyParser.json({ extended: false })

routes.post('/url', urlencodedParser, (req, res) => {

//解析参数

var params = req.body;

var user = {};

user.name = params.name;

user.pwd = params.pwd;

var response = { status: 1, data: user };

res.send(JSON.stringify(response));

res.end();

});

Nodejs请求的写法:

/**

* 原生POST请求

*/

function getAPost() {

var http = require('http');

var contents='{ "name": "value1json", "pwd": "value2" }';

var options = {

host: hostName,

port: port,

path: '/entity/req',

method: 'POST',

headers: {

'Content-Type': 'application/json',

'Content-Length': contents.length

}

}

var req = http.request(options, function (res) {

res.setEncoding('utf8');

res.on('data', function (data) {

console.log("data:", data);//返回数据

});

});

req.write(contents);

req.end();

}

接下来看下最后一种常用的Post请求的数据格式,:multipart/form-data。

这种格式主要用来进行文件上传,当然可以作为表单内容进行键值对提交数据,各个表单项之间用boundary分开。

接下来分别用Java Spring MVC、Android OkHttp、Retrofit、JS Ajax、Nodejs分别演示下这种方式的请求和接口编写:

在Java的Spring MVC中编写Controller接口接收解析multipart/form-data这种数据格式的需要在注解里定义consumes和produces为multipart/form-data​​​​​​​类型。

@CrossOrigin

@RequestMapping(value = "/upReq", method = RequestMethod.POST,

consumes = MediaType.MULTIPART_FORM_DATA_VALUE)

@ResponseBody

public String uploadReq(@RequestPart(value = "file") MultipartFile multipartFile,

@RequestParam("description") String description) {

String fileType = multipartFile.getContentType();

String fileName = multipartFile.getOriginalFilename();

File file = new File("E:/file.jpg");

System.out.println("请求:" + fileType + " "

+ fileName + " " + description);

try {

multipartFile.transferTo(file);

return "success";

} catch (IOException e) {

e.printStackTrace();

return "failure";

}

}

@CrossOrigin

@RequestMapping(value = "/formReq", method = RequestMethod.POST,

consumes = MediaType.MULTIPART_FORM_DATA_VALUE)

@ResponseBody

public String formDataReq(@RequestParam String name,

@RequestParam String pwd) {

System.out.println("formReq:" + name + " " + pwd);

Gson gson = new Gson();

HashMap map = new HashMap<>();

map.put("name", name);

map.put("pwd", pwd);

return gson.toJson(map);

}

Retrofit的写法就是加上@Multipart注解,参数用@Part进行注解:

//multipart/form-data

@Multipart

@POST("req")

Call getRepos(@Part("description") RequestBody description,

@Part MultipartBody.Part file);

Android OkHttp的写法是:

public static void okPost() {

OkHttpClient client = new OkHttpClient();

client.newBuilder()

.build();

//multipart/form-data

File file = new File("E:/img.png");

RequestBody fileBody = new MultipartBody.Builder()

.setType(MultipartBody.FORM)

.addFormDataPart("file", file.getName(),

RequestBody.create(MediaType.parse("image/png"), file))

.addFormDataPart("description", "description")

.build();

Request request = new Request.Builder()

.post(fileBody)

.url(formUrl)

.build();

client.newCall(request).enqueue(new Callback() {

@Override

public void onFailure(Call call, IOException e) {

System.out.println("onFailure:" + e.getLocalizedMessage());

}

@Override

public void onResponse(Call call, Response response) throws IOException {

System.out.println("onResponse:" + response.body().string());

}

});

}

Ajax写法是:

/**

* 原生Ajax POST请求

*/

function getOrigantAjaxPost() {

var oAjax = null;

//这里进行HTTP请求

try {

oAjax = new XMLHttpRequest();

} catch (e) {

oAjax = new ActiveXObject("Microsoft.XMLHTTP");

};

var formData = new FormData();

formData .append("file", file); // 文件对象

formData .append("description", "description");

//post方式

oAjax.open('post', 'http://' + hostName + ':' + port + '/entity/formReq', true);

// oAjax.setRequestHeader("Content-type", "multipart/form-data");

//post发送数据

oAjax.send(formData );

oAjax.onreadystatechange = function () {

//当状态为4的时候,执行以下操作

if (oAjax.readyState == 4 && oAjax.status == 200) {

try {

//+ oAjax.responseText

console.log('tryForm:' + oAjax.responseText);

// alert('readyState' + oAjax.status + " "

// + oAjax.responseText);

} catch (e) {

// alert('你访问的页面出错了' + e);

};

};

};

}

Jquery Ajax写法:

/**

* 原生Ajax POST请求

*/

function getOrigantAjaxPost() {

var form = new FormData();

form.append("file", file); // 文件对象

form.append("description", "image");

$.ajax({

data: form,

async: true,

url: 'http://' + hostName + ':' + port + '/entity/formReq',

type: "post",

processData: false, //tell jQuery not to process the data

contentType: "multipart/form-data", //tell jQuery not to set contentType

success: function (data, status) {

// alert("Data: " + status);

console.log("Data: " + data + " " + status);

},

error: function (e) {

// alert("Data: error" + JSON.stringify(e));

console.log('error ' + JSON.stringify(e));

}

});

}

Nodejs接口写法,用了multipart:

var multipartMiddleware = multipart();

routes.post('/url', multipartMiddleware, (req, res) => {

res.send("success:" + JSON.stringify(req.body) + " " + req.files.file.type);

res.end();

});

Nodejs请求写法:

/**

* 原生POST请求

*/

function getAPost() {

var http = require('http');

var formData = new FormData();

formData.append('file', fs.createReadStream("./filename.zip"));

formData.append('description', 'image');

var options = {

host: hostName,

port: port,

path: '/entity/req',

method: 'POST',

headers: {

'Content-Type': 'multipart/form-data',

}

}

var req = http.request(options, function (res) {

res.setEncoding('utf8');

res.on('data', function (data) {

console.log("data:", data);//返回数据

});

});

req.write(formData);

req.end();

}

以上就是给大家介绍的主流Http Post的数据传输格式在各个语言上的用法。