四种 post 请求格式的XMLHttpRequest 写法

最新推荐文章于 2024-06-12 18:16:12 发布
最新推荐文章于 2024-06-12 18:16:12 发布
阅读量2.7w 收藏 21
点赞数 8
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/harryhare/article/details/80778066
版权

前端 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.csdn.net/tTU1EvLDeLFq5btqiK/article/details/78734023
转码说明：
https://www.w3schools.com/tags/att_form_enctype.asp

harryhare
关注
  • 8
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
XMLHttpRequest发送POST请求
owen_william的博客
05-07 6万+
1.前言 POST请求的适用性更广，可使用更大的请求参数，而且POST请求的请求参数通常不能直接看到。因此在使用Ajax发送请求时，尽量采用POST方式而不是GET方式发送请求。发送POST请求通常需要如下的三个步骤： 1)        使用open方法打开连接时，指定使用POST方式发送请求。 2)        设置正确的请求头，POST请求通常应设置Content-Type请求头
XMLHttpRequest POST请求及接收
qq_45969735的博客
12-11 7860
发送post请求： 1.创建XMLHttpRequest对象 let xhr = new XMLHttpRequest(); 2.建立对服务器的调用。第一个参数是对GET或者POST, 第二个参数可以是相对或者绝对路径, 第三个参数: true异步/false同步, 默认为true xhr.open("POST", "/upimage", true); 3.向服务器发送请求, 仅用于post xhr.send(formData); 4.服务器的响应,表示一个串 xhr.responseText; 例子
JS原生：XMLHttpRequest发送GET&POST请求
热门推荐
欢迎来到长风沛雨的博客
11-01 1万+
学到了xhr发起GET和POST请求，在此记录一下。
深入浅出: XML HttpRequest 入门指南
最新发布
pantouyuchiyu的博客
06-12 1122
XML HttpRequest 是一种浏览器与服务器进行数据交换的 API。尽管它的名字包含 “XML”，XHR 实际上支持多种数据格式，如JSON、HTML 和纯文本等。初期，它主要用于处理 XML 格式数据，但随着时间的发展，XHR 的功能已经大为扩展。XML HttpRequest 是 Web 开发者必须掌握的重要工具之一。尽管有更现代的技术如 Fetch API，了解 XHR 仍对处理旧项目或理解 Web 开发的历史背景非常有用。无论是更新现有的网站还是开发新的应用，XHR 都是一个宝贵的资源。
XMLHttpRequest 发 Post 请求
harryhare的专栏
05-24 8376
0. 使用XMLHttpRequest时，直接在send 函数中写字符串，和 使用formData是不用的 function send(userid,name,node,href,asyn) { var xmlhttp=new XMLHttpRequest(); var url=url_ban; ////直接send字符串或者json串 //var conte...
在 javascript 中使用 xmlHttpRequest 发送 POST 请求
迹忆客
07-06 2819
本文将通过不同的示例解释如何使用 JavaScript 代码在 AJAX 编程中发送 XMLHttpRequest post 请求。
jquery 读取页面load get post ajax 四种方式代码写法
10-28
在jQuery中，有四种主要的方法用于读取页面内容：`load`、`get`、`post`和`ajax`。这些方法都是基于Ajax技术实现的，允许我们在不刷新整个页面的情况下与服务器进行异步交互，从而提升用户体验。下面将详细解释这四...
原生 JS Ajax,GET和POST 请求实例代码
10-22
总结来说，原生JS中的Ajax GET和POST请求是通过XMLHttpRequest对象实现的，它们分别用于获取和提交数据。通过监控`readyState`和`status`，我们可以精确控制何时处理服务器的响应。在实际应用中，你可能需要根据具体...
使用jQuery的ajax方法向服务器发出get和post请求的方法
10-20
本文将深入探讨如何使用jQuery的`$.ajax()`方法来发送GET和POST请求。 首先，我们要了解基本的`$.ajax()`调用语法。如文件中所示，可以有以下两种形式： 1. 简单写法：`$.ajax(url [, settings]);` 2. 完整写法：`...
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
11-28
这里，我们创建了一个POST请求，设置了请求头以指定数据格式为JSON，然后发送JSON格式的username和pwd数据。 3. **JSONP（JSON with Padding）** JSONP是一种跨域数据交互协议，它利用`<script>`标签可以跨域加载...
js基本ajax写法示例代码
10-26
### JS基本Ajax写法知识点详解 #### 一、引言 在现代Web开发中，Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过Ajax，用户可以在不离开当前页面的...
XMLHttpRequest对象的Get请求和Post请求的用法
weixin_47957908的博客
10-18 1875
XMLHttpRequest对象的Get请求和Post请求的用法
XMLhttpRequest 请求 XML,JSON ,POJO 数据
路虽远行则将至，事虽难做则必成
03-27 1641
在使用XMlhttpRequest对象发送请求和响应之前，必须首先使用javaScript对象创建一个XMLHttpRquest对象。 var xmlhttp； function getXMLHttpRequest(){ if(window.ActiveXObject){ xmlhttp:new ActiveXObject("Microsoft.XMLHTTP");
Delphi中使用IXMLHTTPRequest如何用POST方式提交带参
weixin_34179762的博客
11-22 1541
http://blog.sina.com.cn/s/blog_51a71c010100gbua.html说明：服务器端为JAVA，编码UTF-8，返回数据编码UTF-8；数据交换格式JSON。procedure TloginForm.loginBtnClick(Sender: TObject);var  jo: ISuperObject; //JSON接口  req: IXMLHTTPReques...
Delphi编写天气预报查询小程序(IXMLHttpRequest版)
阳光小飞鱼's Blog
03-22 2588
其实那些内置天气预报功能的软件的天气预报功能也都是来源于网上！因为也没有哪个软件公司会自己去架一个气象站了哈哈，现在我就来说说如何通过互联网上的信息来获取天气情况！  目前能查询天气的网站有不少，比较有名的有中国天气网与Google天气，大部分站点与大部分软件的天气预报数据也都是来源于中国天气网！因为中国天气网是中国气象局相关的，所以他的数据会更准确一些！查阅本文信息时，假设读者熟悉http协议
ajax 由 XMLHttpRequest 实现前后台json消息交互
beitian_123的博客
08-16 1286
1. 前言 在几年的开发中一直从事C/C++的开发，之后机缘巧合接触到了java，并间接的知道了与java相关的其他知识，勉强抓住了IT的尾巴，遂对整个IT行业产生了浓厚的兴趣。第一次接触jsp，眼界为之大开，后来才从朋友那里听说到JSP是非常古老的技术，已经被阿里等放弃，取而代之的是vue等前端技术，心甚向往之。由于工作中仍旧用到JSP，故勉强对JSP应用到的相关知识进行总结，a...
JavaScript - XMLHttpRequest 应用示例（传输二进制数据、JSON 字符串，监测进度）
kikajack的博客
02-09 9453
XMLHttpRequest - Living Standard 一直更新的官方标准 MDN XMLHttpRequest 使用 描述 XMLHttpRequest-2 新功能的博客文章 1. 异步模式或同步模式 XMLHttpRequest 对象的 open() 方法的第三个参数 async 设为 false 时，该 XMLHttpRequest 请求以同步模式进行。同步模式用户体验差，...
使用XMLHttpRequest对象发送post和get请求
qq_45911604的博客
03-24 2881
使用XMLHttpRequest对象发送post和get请求 效果展示： 代码展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
使用XMLHttpRequest发送POST数据
p15097962069的博客
05-01 1万+
I'd like to send some data using an XMLHttpRequest in JavaScript. 我想使用JavaScript中的XMLHttpRequest发送一
js原生ajax请求写法
05-24
以下是一个基本的原生 AJAX 请求的示例： ```javascript var xhr = new XMLHttpRequest(); // 创建一个XMLHttpRequest对象 xhr.onreadystatechange = function() { // 监听请求状态的变化 if (xhr.readyState === 4 && xhr.status === 200) { // 请求已完成，且响应状态码为200（成功） console.log(xhr.responseText); // 输出响应结果 } }; xhr.open('GET', 'example.com/api/data'); // 配置请求的方法和URL xhr.send(); // 发送请求 ``` 以上代码中，我们创建了一个 `XMLHttpRequest` 对象并设置了它的 `onreadystatechange` 回调函数。这个回调函数会在每次请求状态发生变化时被调用，我们通过检查 `readyState` 和 `status` 属性来判断请求是否完成且是否成功。如果成功，我们就可以通过 `responseText` 属性获取响应的结果。 在调用 `open()` 方法之后，我们还可以通过 `setRequestHeader()` 方法来设置请求头信息，例如： ```javascript xhr.setRequestHeader('Content-Type', 'application/json'); ``` 这里设置请求头信息为 `Content-Type: application/json`。最后，我们通过 `send()` 方法来发送请求。对于 GET 请求，该方法不需要参数；对于 POST 请求，我们需要将数据作为参数传递给该方法。 以上是一个基本的原生 AJAX 请求的写法，当然，还有很多其他的用法和技巧，具体可以根据实际需要进行学习和使用。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值