很多时候在使用form向后台发送数据的时候,并不需要使用到表单组件。
例如时间戳、ip等,这个时候除了ajax之外,还可以使用HTML5的一个全新方法FormData;在input[type = file]的文件类型中,很多时候想要把一张图片或者是使用canvas绘制好的图像传送到后台时,无法赋值给file文件,只能转换为base64类型传送到后台,然后由后台转换为图片再进行服务器存储;此过程较为复杂;
使用formdata,只需创建新的formdata对象,将要发送的数据添加进去,后台即可接收;数据以及文件对象皆可;
此处已图像为例:
方法1:使用form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取</title>
<script src="js/jquery.js"></script>
</head>
<body>
<img src="img/1.png" alt="" id="imgs"/>
<form action="" method="" id="myform">
<input type="submit" value="提交" />
</form>
<script>
var imgObj = document.getElementById("imgs");
var myform = document.getElementById("myform");//获取form节点
var myFormData = new FormData(myform);//根据获取到的form节点创建formdata对象;
myFormData.append("name",imgObj);//后台即可根据此name捕获到前台发送的数据或文件;
</script>
</body>
</html>
方法2:使用ajax
var newFormData = new FormData();
newFormData.append("username","张三");
newFormData.append("userPwd","xxxxxxxxx");
$.ajax({
type:"get",
url:"",
async:true,
data:newFormData,
success:function(data){
console.log(data);
}
});
君凯商联网 - Alex.Ma