使用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 ...
随机推荐
- L2-013 红色警报 (25 分) (并查集)
链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805063963230208 题目: 战争中保持各个城市间的连通性非 ...
- Asp.net Mvc 与WebForm 混合开发
根据项目实际需求,有时候会想在项目中实现Asp.net Mvc与Webform 混合开发,比如前台框架用MVC,后台框架用WebForm.其实要是实现也很简单,如下: (1)在MVC 中使用Web ...
- Win 10中使用图片查看器
在Win10中,照片应用提供了时间线.专辑等更丰富的图片管理功能,但是对于基于文件夹打开浏览图片的方式显得笨拙, 放大缩小操作略繁琐,有时还会出现当前文件夹图片加载迟缓导致无法快速浏览的问题. 此时你 ...
- 在Cyclone IVE中使用进位链的几个规则
最近在FPGA上做ps级的Delay line,所以认真剖析了一下Cyclone IVE4的布局布线延迟.这里说明CARRY链的几个特性规则,如有错误请各位大大指出,谢谢.(另外由于匆忙没有时间验证其 ...
- Django --- 单表的增删改查
- 九 Jenkins持续集成
随时随地将代码合并的方法叫做 持续集成 =================================================================== 视频用的10.0.0.1 ...
- 在Windows Server2016中安装SQL Server2016
SQL Server2016安装硬.软件条件:点击打开链接 WinServer2016的安装参见: 在虚拟机中安装Windows Server2016 1. SQL Server2016下载地址: - ...
- 【JavaScript】$.extend使用心得及源码研究
最近写多了js的面向对象编程,用$.extend写继承写得很顺手.但是在使用过程中发现有几个问题. 1.深拷贝 $.extend默认是浅拷贝,这意味着在继承复杂对象时,对象中内嵌的对象无法被拷贝到. ...
- SLogViewer下载及使用说明
SLogViewer 1.0使用说明 SLogViewer是一个基本开源界面库SOUI开发的开源的通用的高性能LOG分析工具, 轻松支持上百万行级别的LOG过滤. 支持LOG格式配置. 只要是固定格 ...
- linux查看空间情况----df与du命令
1.查看整个磁盘空间使用情况,可以使用命令 :df -h 2.获取当前的文件夹下的磁盘使用情况,可以使用如下命令:du --max-depth=1 -h 使用 du --max-depth=1 - ...