form表单ajax提交

这里下面有两种  第一种是form表单里面添加了数据，并且含有上传的图片，第二种是from表单中不含有图片  只有普通数据

第一种form表单中包含有图片的类型：

<form method="post" id="addForm" enctype="multipart/form-data">
<table class="table table-bg">
<tbody>
<tr>
<th class="text-r">Banner图片：</th>
<td><input type="file" style="width:300px" class="" name="file" multiple datatype="*2-120" nullmsg="Banner图片不能为空"></td>
</tr>
<tr>
<th class="text-r">跳转地址：</th>
<td><input type="text" style="width:300px" class="input-text" value="" placeholder="" id="url" name="url"></td>
</tr>
<tr>
<th class="text-r">备注：</th>
<td><input type="text" style="width:300px" class="input-text" value="" placeholder="" id="remark" name="remark"></td>
</tr>
<tr>
<th></th>
<td><button class="btn btn-success radius" type="button" onclick="addBanner()"><i class="icon-ok"></i> 确定</button></td>
</tr>
</tbody>
</table>
</form>

如上可以看到 这里有一个form表单 enctype="multipart/form-data" 是用来表示表单可以上传文件/图片类型 这里最后是将所有的数据一起发送到服务器的 

我的ajax是这么写的

function addBanner() {
var formData = new FormData(document.getElementById("addForm"));
$.ajax({
type: 'post',
async: false,
cache: false,
contentType: false,
processData: false,
url: '/Admin/Banner/AddBanner',
data: formData,
success: function (res) {
if (res.code == 200) {
parent.reload();
} else {
alert(res.result);
}
}
});
}

这里就整个将form表单的数据拿到并且发送到后台 下面是后台接收数据的写法

public async Task<JsonResult> AddBanner(AddBanner banner, IFormCollection collection)
{
var files = collection.Files;
if (files.Count > 0)
{
string absolutePath = "wwwroot/BannerPic/";
string[] fileTypes = { ".gif", ".jpg", ".jpeg", ".png", ".bmp" };
string extension = Path.GetExtension(files[0].FileName);
if (fileTypes.Contains(extension.ToLower()))
{
if (!Directory.Exists(absolutePath))
{
Directory.CreateDirectory(absolutePath);
}
string fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + extension;
var filePath = Path.GetFullPath(absolutePath + "\\" + fileName);
using (var stream = new FileStream(filePath, FileMode.Create))
{
await files[0].CopyToAsync(stream);
}
banner.Image = "/BannerPic/" + fileName;
//https://localhost:44395/BannerPic/20200203232630.jpg
return Json(_bannerService.AddBanner(banner));
}
else
{
return Json(new ResPonseModel { code = 0, result = "上传图片格式不正确" });
}
}
else
{
return Json(new ResPonseModel { code = 0, result = "请上传图片文件" });
}
}

这里的写法中   AddBanner banner, IFormCollection collection

AddBanner是要映射的模型 .net是可以自动映射 IFormCollection 是接收的图片/文件

 

第二种 简单的form表单 只有普通数据

如下是html表单

 

<form method="post" id="addForm">
<table class="table table-bg">
<tbody>
<tr>
<th class="text-r">类别名称：</th>
<td><input type="text" style="width:300px" class="input-text" value="" placeholder="" id="Name" name="Name" datatype="*2-120" nullmsg="类别名称不能为空"></td>
</tr>
<tr>
<th class="text-r">排序：</th>
<td><input type="text" style="width:300px" class="input-text" value="" placeholder="" id="Sort" name="Sort"></td>
</tr>
<tr>
<th class="text-r">备注：</th>
<td><input type="text" style="width:300px" class="input-text" value="" placeholder="" id="Remark" name="Remark"></td>
</tr>
<tr>
<th></th>
<td><button class="btn btn-success radius" type="submit" onclick="add()"><i class="icon-ok"></i> 确定</button></td>
</tr>
</tbody>
</table>
</form>

接下来是js的写法 如何发送数据到服务器

function add() {
var data = $("#addForm").serialize();
//alert(data);
$.ajax({
type: 'post',
async: false,
url: '/Admin/News/Addclassify',
data: data,
success: function (res) {
if (res.code == 200) {
parent.reload();
} else {
alert(res.result);
}
}
});
}

重点就在于这里只有form表单中的name属性和后台model类型的属性一一对应  那么.net就可以实现在动映射

这里是直接拿到表单数据 然后直接序列化 传入后台就ok

服务器端的写法：

[HttpPost]
public JsonResult Addclassify(AddNewsClassify addNewsClassify)
{
if (string.IsNullOrEmpty(addNewsClassify.Name))
{
return Json(new ResPonseModel { code = 0, result = "请输入新闻类别名称" });
}
return Json(_newsService.AddNewsClassify(addNewsClassify));
}

做这个记录主要是因为自己以前一直很傻很傻的form表单只知道用jquery的方法一个一个的去获取数据 所以写下来