Getting data submitted by the web

background

Before golang development, beego framework was used. The advantage of the framework is that all the tools are encapsulated. When obtaining parameters, the corresponding data can be obtained by calling the corresponding methods.

Recently, when I wrote a novel about the web service function of crawler management from scratch, I found that the knowledge I had could not meet my development needs. I failed many times to test it. I hope to write this record post for future review.

The data submission scenarios are roughly as follows:
1. Form submission, pure Form submission data;
2. Form upload file, using Form form upload file;
3. ajax submits json data;
4. ajax submits form data;
5. ajax upload files;

Next, I'll give a practical demonstration of the above five scenarios and use the Fetch API instead of ajax to send requests.

Example

Example 1: html form submission data

  • html form
<form action="http://127.0.0.1:8088/api/task?debug=1" method="POST">
    <input type="text" name="username" placeholder="username">
    <input type="text" name="password" placeholder="password">
    <input type="submit" value="Submit">
</form>
  • golang receives data
r.ParseForm() // First parse the form

fmt.Println("r.Form : ", r.Form)
fmt.Println("r.Form[\"username\"]", r.Form["username"]) // Array indexing for data acquisition
fmt.Println("r.Form.get(\"password\")", r.Form.Get("password")) // Get way to get data
  • output
r.Form :  map[debug:[1] password:[testpass] username:[test]]
r.Form["username"] [test]
r.Form.get("password") testpass

Example 2: html form upload file

  • html forms
<form enctype="multipart/form-data" action="http://127.0.0.1:8088/api/task?debug=1" method="POST">
    <input type="file" name="file" id="">
    <input type="submit" value="Submit">
</form>
  • golang receives data
fmt.Println("r.Form : ", r.Form)
file, fileHandler, _ := r.FormFile("file")
fmt.Println("File Header : ", fileHandler.Header)
fmt.Println("Filename : ", fileHandler.Filename)
b, _ :=ioutil.ReadAll(file) // Read file content
fmt.Println(string(b))
  • output
r.Form :  map[debug:[1]]
File Header :  map[Content-Disposition:[form-data; name="file"; filename="url.csv"] Content-Type:[application/octet-stream]]
Filename :  url.csv
http://www.aaaa.com/test/index.html
http://www.ccccc.com/test/index.php
http://www.aaaa.com/test/login.php
http://www.aaaa.com

Example 3: ajax submits json data, and golang receives it by reading it from the request body

  • html, fetch submit data
<button onclick="test()">test</button>
<script>
function test() {
    fetch("http://127.0.0.1:8088/api/task?debug=1", {
            body: JSON.stringify({"username":"test", "password":"test_password"}),
            method: "POST",
            headers: {
                "Accept": "application/json",
            }
        }
    ).then(response => response.json())
    .then(data => {
        console.log(data);
    });
}
</script>
  • golang receives data
json,_ := ioutil.ReadAll(r.Body)
fmt.Println("Got params: ", string(json))

fmt.Println("Echo request: ", r)
fmt.Println("Echo request header: ", r.Header)
fmt.Println("Echo request body: ", r.Body)
fmt.Println("Echo remote addr: ", r.RemoteAddr)
fmt.Println("Echo host: ", r.Host)
fmt.Println("Echo request method: ", r.Method)
fmt.Println("Echo request UA: ", r.UserAgent())
  • Output:
Got params:  {"username":"test","password":"test_password"}

Echo request:  &{POST /api/task?debug=1 HTTP/1.1 1 1 map[Accept:[application/json] Accept-Encoding:[gzip, deflate, br] Accept-Language:[en-US,en;q=0.9] Connection:[keep-alive] Content-Length:[46] Content-Type:[text/plain;charset=UTF-8] Origin:[http://localhost:8099] Referer:[http://localhost:8099/test2.html] Sec-Fetch-Mode:[cors] Sec-Fetch-Site:[cross-site] User-Agent:[Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3879.0 Safari/537.36 Edg/78.0.249.1]] 0xc0001d6140 <nil> 46 [] false 127.0.0.1:8088 map[debug:[1]] map[] <nil> map[] 127.0.0.1:61679 /api/task?debug=1 <nil> <nil> <nil> 0xc0001ec210}
Echo request header:  map[Accept:[application/json] Accept-Encoding:[gzip, deflate, br] Accept-Language:[en-US,en;q=0.9] Connection:[keep-alive] Content-Length:[46] Content-Type:[text/plain;charset=UTF-8] Origin:[http://localhost:8099] Referer:[http://localhost:8099/test2.html] Sec-Fetch-Mode:[cors] Sec-Fetch-Site:[cross-site] User-Agent:[Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3879.0 Safari/537.36 Edg/78.0.249.1]]
Echo request body:  &{0xc0001f4020 <nil> <nil> false true {0 0} true false false 0x706ce0}
Echo remote addr:  127.0.0.1:61679
Echo host:  127.0.0.1:8088
Echo request method:  POST
Echo request UA:  Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3879.0 Safari/537.36 Edg/78.0.249.1

Example 4: ajax submits form data

  • html, fetch submit data
<button onclick="test()">test</button>
<script>
function test() {
    let formData = new FormData();
    formData.set("username", "test");
    formData.set("password", "test_password");
    fetch("http://localhost:8088/api/task?debug=1", {
            body: formData,
            method: "POST",
            headers: {
                "Accept": "application/json"
            }
        }
    ).then(response => response.json())
    .then(data => {
        console.log(data);
    });
}
</script>
  • golang receives data
r.ParseMultipartForm(32 << 20)

fmt.Println(r.Form)
fmt.Println("username: ", r.Form.Get("username"))
fmt.Println("password: ", r.Form.Get("password"))
  • output
map[debug:[1] password:[test_password] username:[test]]
username:  test
password:  test_password

Example 5: ajax upload file

  • html, ajax submit data
<input type="file" name="test_file" id="test_file">
<button onclick="test()">test</button>
<script>
function test() {
    let formData = new FormData();
    formData.set("test_file", document.getElementById("test_file").files[0]);
    formData.set("password", "test_password");
    fetch("http://localhost:8088/api/task?debug=1", {
            body: formData,
            method: "POST",
            headers: {
                "Accept": "application/json"
            }
        }
    ).then(response => response.json())
    .then(data => {
        console.log(data);
    });
}
</script>
  • golang receives data
	r.ParseForm()
	file, fileHandle, _ := r.FormFile("test_file")

	fmt.Println(fileHandle.Header, fileHandle.Filename, fileHandle.Size)

	b, _ := ioutil.ReadAll(file)
	fmt.Println(string(b))

	fmt.Println("password: ", r.Form.Get("password"))
  • output
map[Content-Disposition:[form-data; name="test_file"; filename="url.csv"] Content-Type:[application/octet-stream]] url.csv 136
http://www.aaaa.com/test/index.html
http://www.ccccc.com/test/index.php
http://www.aaaa.com/test/login.php
http://www.aaaa.com
password:  test_password

Tags: JSON PHP Windows encoding

Posted on Fri, 30 Aug 2019 03:55:31 -0400 by gabriel kent

Hot Tags

©2023 Programmer Help