使用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 ...
随机推荐
- Spring Cloud 2-Config 分布式配置中心(七)
Spring Cloud Config 1.github配置 2.服务端配置 pom.xml application.xml Application.java 3.配置和命名 1. 配置加载顺序 ...
- rsyncd启动脚本
#!/bin/bash ############################################################## # File Name: -.sh # Versi ...
- dubbo基本信息
1.Dubbo是什么? Dubbo是阿里巴巴开源的基于 Java 的高性能 RPC 分布式服务框架,现已成为 Apache 基金会孵化项目. 面试官问你如果这个都不清楚,那下面的就没必要问了. 官网: ...
- 面向对象原生JavaScript案例炫彩小球
面向对象其实对于初学者来说还是比较难以理解的,以前看到一个面试题目 面向对象是什么? 面向对象是一种思想,千万别入坑了: 这次给大家带来的是一个鼠标移动产生小球的案例,不是我不想给大家分享如何去认识面 ...
- C++多线程join同步问题
其实就是想记录一下自己的想法,就是关于多个线程的执行顺序的思考.之前一直觉得std::thread::join会阻塞其他线程的运行,其实并不是这样子的.举个例子 std::vector<std: ...
- MySQL---DDL+DQL---(四)
三.对数据库表记录进行操作(修改DDL) 1.插入记录:insert 语法:insert into 表 (列名1,列名2,列名3..) values (值1,值2,值3..);--向表中插入某些列in ...
- 如何选择 Apache Tomcat 与 JDK 版本
Apache Tomcat Version
- 定时任务框架Quartz-(一)Quartz入门与Demo搭建
注:本文来源于:是Guava不是瓜娃 <定时任务框架Quartz-(一)Quartz入门与Demo搭建> 一.什么是Quartz 什么是Quartz? Quartz是OpenSympho ...
- Python 包管理(PYPA)
Python包的管理可以通过Python 自带的管理 工具,例如:package-autoremove,package-list-packages, package-install 等,使用起来也非常 ...
- 客户端和浏览器都不能连接SVN服务器
错误提示 1.在对话框中提示 2.在As上提示 Error:svn: E731001: Unable to connect to a repository at URL 'https://XXX/sv ...