使用jQuery.form库中ajaxSubmit提交表单时遇到的一些问题
初入前端,网上找的很多资料都不够详细,导致遇到很多问题,现记录如下:
1.首先引入
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.form.js"></script>
这个两个 脚本库,src属性为路径,注意顺序,form为jQuery的一个子库,因此放在后面。
2.js冲突。
我是在mvc下开发,引入库后运行提示ajaxSubmit函数找不到,ie会直接报异常,百度浏览器不会报异常,需要进入浏览器调试模式下发现。
百度了很久,多数都是说没有引入form库,也有少数的人说是由于js库冲突所致,子页面中引入的js库与母版页或布局页引入的js库冲突,没有找到明确的解决办法,
遂到布局页查看引入了哪些js库,查看到布局页中使用
@Scripts.Render("~/bundles/modernizr")
读取js文件,又查找相关资料发现,如果要在子页面引入其它js文件,应该使用下面方式,
@section scripts
{
<script src="~/Scripts/jquery.form.js"></script>
}
放在@section scripts块中。
3.刷新问题,这个问题是由于提交按钮type设置为submit导致,本身submit会自动执行当前视图的默认控制器方法,而又在按钮的单击事件中执行提交,从而进行刷新。
切记,使用ajaxSubmit等其它方式提交时,input标签type一定设置为button,不然多此一举。
4.ajaxSubmit没有提交,没有跳转到相应的控制器方法。
最开始使用的js代码:
function AddPicture_Click() {
var options = {
url: "/GraphicPublicize/Add", // 要调用的控制器方法
type: "post",
data: {
"typeName": $("#type_list").find("[class='type_list_selected']").text(),
}, // 传递的数据
beforeSubmit: ValidationBeforeSubmit, // 提交之前的回调函数
success: ResponseAfterSuccess, // 提交之后返回的回调函数
};
jQuery('#Form').submit(function () {
$("#Form").ajaxSubmit(options);
return false;
});
return;
}
此函数绑定到按钮的单击事件上。此方式无效,跟踪js明明执行了,但是回调函数和后端代码都没有执行。
之后改为:
function AddPicture_Click() {
var options = {
url: "/GraphicPublicize/Add", // 要调用的控制器方法
type: "post",
data: {
"typeName": $("#type_list").find("[class='type_list_selected']").text(),
}, // 传递的数据
beforeSubmit: ValidationBeforeSubmit, // 提交之前的回调函数
success: ResponseAfterSuccess, // 提交之后返回的回调函数
};
// jQuery('#Form').submit(function () { // 屏蔽这几行代码
$("#Form").ajaxSubmit(options);
// return false;
//});
return;
}
遂执行提交成功,什么原因我也不晓得。
5.传递数据问题,网上说照这样是可以传的,
var options = {
url: "/GraphicPublicize/Add", // 要调用的控制器方法
type: "post",
data: {
"typeName": $("#type_list").find("[class='type_list_selected']").text(),
}, // 传递的数据
beforeSubmit: ValidationBeforeSubmit, // 提交之前的回调函数
success: ResponseAfterSuccess, // 提交之后返回的回调函数
};
实测不行,还有说jquery.form.js文件源码不全,建议重新下载,还是不行,不知原因,又发现request中的param集合中有我需要的数据就没管了。
关于ajaxSubmit可另行参考http://www.cnblogs.com/Leo_wl/p/4393190.html#undefined。
质量不咋的,请指教。
使用jQuery.form库中ajaxSubmit提交表单时遇到的一些问题的更多相关文章
- jquery.form插件中动态修改表单数据
jquery.form jquery.form插件(http://malsup.com/jquery/form/)是大家经常会用到的一个jQuery插件,它可以很方便将表单转换为ajax的方式进行提交 ...
- jquery通过submit()和serialize()提交表单
<script type="text/javascript"> $(function() { $('#form1').submit(function() { //当提交 ...
- JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验
1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...
- Ajax实现提交表单时验证码自动验证(原创自Zjmainstay)
本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...
- 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值
$(function () { var wait = $("<img src=\"\" alt=\"正在上传\"/>"); $( ...
- Ajax提交表单时验证码自动验证 php后端验证码检测
本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...
- Django:提交表单时遇到403错误:CSRF verification failed
Django:提交表单时遇到403错误:CSRF verification failed 问题: 提交表单时遇到403错误:CSRF verification failed 解决方案: 在表单界面ht ...
- php提交表单时如何保留多个空格及换行的文本样式
需求是:用户提交表单时屏蔽敏感词的功能.其中敏感词来自服务器端同一路径下的ciku.txt,敏感词通过"|"连接,例如"g|c|a",提交表单时替换敏感词,更重 ...
- php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
if(isset($_POST['submit'])) 它的意思是不是判断是否配置了$_POST['submit'] 这个变量呢?如果有这个变量 在执行其它代码 应该这样用if(isset($_POS ...
随机推荐
- COGS2187 [HZOI 2015] 帕秋莉的超级多项式
什么都别说了,咱心态已经炸了... question 题目戳这里的说... 其实就是叫你求下面这个式子的导函数: noteskey 其实是道板子题呢~ 刚好给我们弄个多项式合集的说... 各种板子粘贴 ...
- Python爬虫基础之UrlError
一.urllib.error python的urllib.error模块主要是应对urllib.request在网络请求过程中出现的异常而定义的异常处理类.主要有URLError和HTTPError两 ...
- PHP常用函数大全500+
php usleep() //函数延迟代码执行若干微秒. unpack() //函数从二进制字符串对数据进行解包. uniqid() //函数基于以微秒计的当前时间,生成一个唯一的 ID. time_ ...
- [转]GO err is shadowed during return
1 前言 有时候编译Go项目会出现GO err is shadowed during return的问题,是因为作用域导致变量重名,return时不是你预期的变量导致的. 2 样例 这里先复现问题,然 ...
- CNN解析和模型分析
https://wenku.baidu.com/view/b0add84eb94ae45c3b3567ec102de2bd9605de8a.html?pn=51 http://www.cnblogs. ...
- set操作
Set操作,Set集合就是不允许重复的列表 sadd(name,values) # name对应的集合中添加元素 scard(name) 获取name对应的集合中元素个数 sdiff(keys, *a ...
- SQL对某个字段进行排名
SELECT ( ) AS rowno, a.badge,a.NAME,a.direct_evaluate_rate,a.view_rate FROM ( SELECT * FROM `hrs_sta ...
- Flink on yarn的配置及执行
1. 写在前面 Flink被誉为第四代大数据计算引擎组件,即可以用作基于离线分布式计算,也可以应用于实时计算.Flink可以自己搭建集群模式已提供为庞大数据的计算.但在实际应用中.都是计算hdfs上的 ...
- resource links
http://cenalulu.github.io/linux/all-about-cpu-cache/
- Centos发布java的war包后,无法访问发布的工程
分析: 这时候,看你的开启的端口,8080,3306都能访问的话,那么就是你的地址写错了,可是,经测试,c3p0中的web地址是正确的,那么就去看linux中的tomcat的日志文件再tomcat/l ...