四种 post 请求格式的XMLHttpRequest 写法

最新推荐文章于 2025-09-21 18:20:03 发布

原创最新推荐文章于 2025-09-21 18:20:03 发布 · 2.8w 阅读

21 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种前端JS通过不同格式发送POST请求到Go后端的方法，并展示了如何解析这些请求。具体包括使用FormData、JSON、纯文本及x-www-form-urlencoded格式的数据传输方式。

前端 js 请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>post test</title>>
    <script>
        function send(type) {
            url = "http://127.0.0.1:8080/";
            xhr = new XMLHttpRequest();
            xhr.open("post", url, true);
            var data;
            if (type === "formdata") {
                data = new FormData();
                data.append("key", "value");
            } else if (type === "json") {
                xhr.setRequestHeader("Content-Type", "application/json");
                data = JSON.stringify({"key": "value"});
            } else if (type === "text") {
                data = "key=value";
            } else if (type === "www") {
                // 这个header 其实是 传统post 表单的格式
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                data = "key=value";
            }
            xhr.send(data);
        }

    </script>
</head>
<body>
<div>
    <input type="button" onclick="send('formdata')" value="FormData"/>
    <br/>
    <input type="button" onclick="send('json')" value="application/json"/>
    <br/>
    <input type="button" onclick="send('text')" value="text"/>
    <br/>
    <input type="button" onclick="send('www')" value="application/x-www-form-urlencoded"/>
</div>
</body>
</html>>

后端处理

package main

import (
"fmt"
"net/http"
)


func IndexHandler(w http.ResponseWriter, r *http.Request) {
	fmt.Println("before parse:")
	printKey(r);

	r.ParseForm()
	
	fmt.Println("ParseForm:")
	printKey(r);

	r.ParseMultipartForm(2048)
	
	fmt.Println("ParseMultipartForm:")
	printKey(r);
}
func printKey( r *http.Request){
	fmt.Println(r.Form["key"])
	fmt.Println(r.PostForm["key"])
	if r.MultipartForm!=nil {
		fmt.Println(r.MultipartForm.Value["key"])
	}
}



func main() {
	fmt.Println("listening 8080")
	http.HandleFunc("/", IndexHandler)
	http.ListenAndServe(":8080", nil)
}

get
http://localhost:8080/?key=value1

 before parse:
[]
[]
ParseForm:
[value1]
[]
ParseMultipartForm:
[value1]
[]

application/x-www-form-urlencoded:

before parse:
[]
[]
ParseForm:
[value]
[value]
ParseMultipartForm:
[value]
[value]

FormData(MultipartForm)

before parse:
[]
[]
ParseForm:
[]
[]
ParseMultipartForm:
[value]
[value]
[value]

综上，使用 go 时：
ParseMultipartForm 这个函数要单独调用
postform 中有的 form中一定有，MultipartForm 中有的 postform 和 form也一定有

参考：
四种格式：
https://blog.youkuaiyun.com/tTU1EvLDeLFq5btqiK/article/details/78734023
转码说明：
https://www.w3schools.com/tags/att_form_enctype.asp