使用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 ...
随机推荐
- linux常用技能
阿里云镜像图形界面克隆虚拟机 linux替换阿里云镜像 centos6.6安装图形界面 克隆虚拟机后网络问题 linux替换阿里云镜像 第一步:备份你的原镜像文件,以免出错后可以恢复. cp /etc ...
- c#串口编程(转)
在单片机项目开发中,上位机也是一个很重要的部分,主要用于数据显示(波形.温度等).用户控制(LED,继电器等),下位机(单片机)与 上位机之间要进行数据通信的两种方式都是基于串口的: USB转串口 — ...
- 20175226 2018-2019-2 《Java程序设计》第五周学习总结
20175226 2018-2019-2 <Java程序设计>第五周学习总结 教材学习内容总结 接口 包含接口声明和接口体 接口声明interface 接口的名字 接口体中包含常量的声明( ...
- MQTT初步使用
环境搭建 1.mosquitto所需要的rpm包 2.c-ares-1.12.0 3.安装最新的openssl版本 4.mosquitto-1.4.10 mosquitto需要的rpm包 c-ares ...
- SVG初尝试之path
命令汇总 命令基本规律 移动和直线命令 弧线命令
- MYSQL 单表一对多查询,将多条记录合并成一条记录
一.描述: 在MySQL 5.6环境下,应工作需求:将一个表中多条某个相同字段的其他字段合并(不太会表达,有点绕,直接上图) 想要达到的效果: 实现SQL语句: SELECT a.books, GRO ...
- 1024 Python 要诀
在medium看到一篇好文,给初学者的Python小技巧,非常实用,可以用在你的程序中,代码瞬间变得高大上,看起来还有Pythonic 的感觉,Talk is cheap show me the co ...
- js中数组对象去重的方法
var arr = [{ key: '01', value: '乐乐' }, { key: '02', value: '博博' }, { key: '03', value: '淘淘' },{ key: ...
- 学习HTML5, Canvas及简单动画的使用
通过在CSDN中的一些简单课程学习,跟随老师联系,做了如下的月亮,太阳和地球的运动效果.纪录在文章中,用于下次使用. 准备工作如下: 1. 使用三张背景图片 太阳 月亮 地球 2. 在HTML页面中定 ...
- Centos安装Consul微服务
一.简介 Consul([ˈkɒnsl],康搜)是注册中心,服务提供者.服务消费者等都要注册到Consul中,这样就可以实现服务提供者.服务消费者的隔离.除了Consul之外,还有Eureka.Zoo ...