| 详解http post请求的几种数据传输方式 | 您所在的位置：网站首页 › 获取文档数据的方法有几种类型 › 详解http post请求的几种数据传输方式 |
详解http post请求的几种数据传输方式
|
在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的数据传输格式在各个语言上的用法。
|
【本文地址】
公司简介
联系我们