详解http post请求的几种数据传输方式

﹏ヽ暗。殇╰゛Y 2022-04-23 10:00 2507阅读 0赞

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

Http的请求传输方式很多：

![2019020713241416.PNG][]

我们着重讲解Post方式。Post请求包含两部分：请求头（header）和请求体（body）。

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pheTEwMDUwMA_size_16_color_FFFFFF_t_70][]

通过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<String, String> 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<ResponseBody> 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写法：

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

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

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<String, String> 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<ResponseBody> 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<String, String> 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即可：

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<String, String> 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<ResponseBody> 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的数据传输格式在各个语言上的用法。

[2019020713241416.PNG]: /images/20220321/9f599f0f15a24bed8f10a982ec5a4f2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pheTEwMDUwMA_size_16_color_FFFFFF_t_70]: /images/20220321/d7f0b89ae47242789ee654296e0fd6bd.png