jquery Ajax上传数据格式

最新推荐文章于 2021-10-09 08:08:52 发布

光九

最新推荐文章于 2021-10-09 08:08:52 发布

阅读量491

点赞数

CC 4.0 BY-SA版权

分类专栏： GO学习疑难点前端文章标签： ajax jquery

本文链接：https://blog.youkuaiyun.com/qq_41509873/article/details/109139075

GO学习疑难点同时被 2 个专栏收录

3 篇文章

订阅专栏

前端

2 篇文章

订阅专栏

本文详细介绍了使用jQuery AJAX进行前后端数据交互的方法，包括通过formData上传文件、以表单格式发送数据及发送JSON字符串的不同场景，并提供了具体的代码示例。

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

今天琢磨了一下前后端分离的项目中jquery ajax上传数据，后端接收的问题

1、采用formData，这种可以用来直接上传文件，后端用来 PostForm 获取数据

//创建form表单
var formData = new FormData
//获取文件对象
var file = document.getElementById("upload").files[0]
//获取值
var text = $("#txt").val()
//组装数据
formData.append("upload",file)
formData.append("user",text)
$.ajax({
	type:"POST", 	//请求方式
	url:"/test",		//请求地址
	dataType:"json",  //数据返回格式
	//contentType:'application/json',数据上传格式
	data: formData,			//这里的data:发送给服务器的请求数据
	success:function(data){  //回调函数：数据请求成功之后调用
		alert("success");  				 //这里的data:从服务器发送回来的数据
		console.log(data)
	},
	error:function(response){
	alert("错误");
	}
	})
})

2、也有一下格式，但是实际上还是form表单格式，用 PostForm接收

$.ajax({
	type:"POST", 	//请求方式
	url:"/test",		//请求地址
	dataType:"json",  //数据返回格式
	//contentType:'application/json',数据上传格式
	data: {'username':'user','password':'123'},			//这里的data:发送给服务器的请求数据
	success:function(data){  //回调函数：数据请求成功之后调用
		alert("success");  				 //这里的data:从服务器发送回来的数据
		console.log(data)
	},
	error:function(response){
	alert("错误");
	}
	})
})

3、想后端上传json数据，是传送json字符串，不是json对象，这时用 c.BindJSON(&user) 接收

$.ajax({
		type:"POST", 	//请求方式
		url:"/test",		//请求地址
		dataType:"json",   //数据返回格式
		contentType:'application/json',   //数据上传格式
		data: JSON.stringify({
					User:'a',
                    Password:'123'
				}),			//这里的data:发送给服务器的请求数据
		success:function(data){  //回调函数：数据请求成功之后调用
				alert("success");  				 //这里的data:从服务器发送回来的数据
				console.log(data)
		},
		error:function(response){
		        alert("错误");
		}
		
		})
})

关于用postman测试相关的数据可以参考文章链接一

参考文章：https://www.cnblogs.com/Marydon20170307/p/12621036.html

https://www.cnblogs.com/dreamcat/p/12100721.html