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的方法一个一个的去获取数据 所以写下来
form表单ajax提交的更多相关文章
- 使用ajax方法实现form表单的提交(附源码)
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...
- 利用 ajax自定义Form表单的提交方式
需求场景:有时候单纯的form表单无法向后端传递额外的参数 比如需要action传递js异步生成的参数 ,form表单默认的action就无法满足需求,这时就需要我们自定义form表单的提交方式. h ...
- 使用ajax方法实现form表单的提交
作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...
- 基于form表单submit提交不跳转
方法一:target <html> <body> <form action="" method="post" target=&qu ...
- php form表单ajax上传图片方法
form表单ajax上传图片方法 先引用jquery.form.js 前台代码<pre><form id="form1"> <input id=&qu ...
- JavaScript 创建一个 form 表单并提交
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- form表单js提交
form表单js提交 $('#form1').submit(); 延迟form表单提交 function submitcheck() { $('#light').css('display', ...
- 微信自带浏览器不支持form表单post提交方案解决
微信自带浏览器form表单post提交,Java控制后台获取不到值得解决方案: 第一种:把post改成get请求,但是改后另一个问题来了就是,数据不安全了,连接上都能看到,导致数据会流失,Java ...
- form表单的提交方式
开发中表单提交是很常见的,表单的提交方式也多种方式. 1.使用submit按钮提交表单 <input type="submit"/> <!DOCTYPE htm ...
随机推荐
- Oracle缓存表与Oracle缓存的区别
一.Oracle缓存表 与 Oracle缓存 的概念 Oracle 缓存:是把Oracle近期查询的语句放置在Oracle设定的缓存当中. Oracle 缓存表:是把某个表放置在缓存当中,缓存是Ora ...
- CentOS 7 系统的安装
1.进入安装界面 2.选择"Install CentOS 7" 3.进入欢迎界面,默认语言为"English",点击"Continue" 进 ...
- 云原生 go-zero 微服务框架
0. go-zero介绍 go-zero是一个集成了各种工程实践的web和rpc框架.通过弹性设计保障了大并发服务端的稳定性,经受了充分的实战检验. go-zero包含极简的API定义和生成工具goc ...
- JVM 第六篇:极致优化 IDEA 启动速度
本文内容过于硬核,建议有 Java 相关经验人士阅读. 1. 引言 相信做 Java 开发的同学,对 IDEA 这个工具应该都不陌生,即使不使用 IDEA 做开发,那么对 Eclipse 这个工具应该 ...
- bootStrap小结1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- C++ concurrent_queue
ConcurrentQueue 用C++11提供的多线程类实现一个线程安全的队列: #include <queue> #include <mutex> #include < ...
- 【树形DP】BZOJ 1131 Sta
题目内容 给出一个\(N\)个点的树,找出一个点来,以这个点为根的树时,所有点的深度之和最大 输入格式 给出一个数字\(N\),代表有\(N\)个点.\(N \le 1000000\).下面\(N-1 ...
- centos8平台用ss监控网络
一,ss所属的包: [root@blog ~]# whereis ss ss: /usr/sbin/ss /usr/share/man/man8/ss.8.gz [root@blog ~]# rpm ...
- 【Azure Redis 缓存 Azure Cache For Redis】如何设置让Azure Redis中的RDB文件暂留更久(如7天)
问题描述 Azure Redis和所有的Redis服务一样,可以让你保留存储在Redis中的数据.以防万一在Redis服务器出现故障的时候能尽可能小的减少数据的损失.在Azure Redis服务中,默 ...
- c++ 遍历目录下文件、文件夹
BOOL GetDirFiles(const char* pszDir, char* pszFileType, std::vector<std::string>& vtFileLi ...