使用 XMLHttpRequest 和 FormData 发送混合内容类型请求

本文详细介绍了如何通过XMLHttpRequest和FormData将JSON对象和文件一起发送到服务器,展示了如何设置不同字段的Content-Type,以及后端Java和C#的接收处理方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用 XMLHttpRequest 和 FormData 发送混合内容类型请求

在构建一个包含JSON对象和文件的HTTP POST请求时,我们可以利用FormData对象将数据组织成multipart/form-data格式,并通过XMLHttpRequest发送给服务器。下面是一个示例代码,展示如何将p_body字段设置为application/json内容类型,而其他非文件字段(如timestampsign)仍按form-data方式处理。

var data = new FormData();
// 将p_body转换为JSON字符串并设置content-type
var pBodyJsonStr = JSON.stringify({ ctmid: "8A72C254-B970-4CBB-8BCC-81A3CC166B5C", jobid: "41340652" });
//实测 Blob 有问题 会产生filename="blob"
//data.append("p_body", new Blob([pBodyJsonStr], { type: "application/json" })); 
data.append("p_body", pBodyJsonStr);

data.append("timestamp", "1708421916");
data.append("sign", "d396f01b47dfa727c149cada5a0dba48");

data.append("p_file", fileInput.files[0], "/C:/test/123.docx");

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
  if(this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("POST", "http://xyzapij.51job.com/talent-domain/consumer/resumeAnalysis");
xhr.setRequestHeader("Token", "..."); // 填写完整的Token值

xhr.send(data);

注意:上述示例中将p_body作为JSON字符串封装在Blob中,并指定了Content-Type为application/json,这是一种特殊处理方式,通常需要服务端接口明确支持解析这种混合模式的数据。在实际应用中,请务必确认并遵循目标服务端接口的实际需求与规范。

附后端代码

java

	import com.alibaba.nacos.common.utils.JacksonUtils;
	
	@RequestMapping(method = RequestMethod.POST, path = "/resumeAnalysis")
	public Result<?> resumeAnalysis(
	        @RequestPart("p_file") MultipartFile file,
        	//postman 能设置 Content-Type: application/json,但前端小伙伴遇到困难 因此改为String
        	//@RequestPart("p_body") AddSelectJobDTO addSelectJobDto, 
	        @RequestPart("p_body") String body,
	        @RequestPart("timestamp") String timestamp //用 Long 没成功
) throws Exception {
	    AddSelectJobDTO addSelectJobDto = JacksonUtils.toObj(body, AddSelectJobDTO.class);
	    ......
	    return ResultBuilder.success();
	}

c#

	public void ResumeAnalysis()
	{
        HttpFileCollection files = Context.Request.Files;
        HttpPostedFile file = files [0];

        string p_body= System.Web.HttpContext.Current.Request["p_body"];
        JObject body = JObject.Parse(p_body);

        string timestamp= System.Web.HttpContext.Current.Request["timestamp"];
	}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值