初入前端,网上找的很多资料都不够详细,导致遇到很多问题,现记录如下:

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提交表单时遇到的一些问题的更多相关文章

  1. jquery.form插件中动态修改表单数据

    jquery.form jquery.form插件(http://malsup.com/jquery/form/)是大家经常会用到的一个jQuery插件,它可以很方便将表单转换为ajax的方式进行提交 ...

  2. jquery通过submit()和serialize()提交表单

    <script type="text/javascript"> $(function() { $('#form1').submit(function() { //当提交 ...

  3. JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验

    1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...

  4. Ajax实现提交表单时验证码自动验证(原创自Zjmainstay)

    本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...

  5. 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值

    $(function () { var wait = $("<img src=\"\" alt=\"正在上传\"/>"); $( ...

  6. Ajax提交表单时验证码自动验证 php后端验证码检测

    本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...

  7. Django:提交表单时遇到403错误:CSRF verification failed

    Django:提交表单时遇到403错误:CSRF verification failed 问题: 提交表单时遇到403错误:CSRF verification failed 解决方案: 在表单界面ht ...

  8. php提交表单时如何保留多个空格及换行的文本样式

    需求是:用户提交表单时屏蔽敏感词的功能.其中敏感词来自服务器端同一路径下的ciku.txt,敏感词通过"|"连接,例如"g|c|a",提交表单时替换敏感词,更重 ...

  9. php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别

    if(isset($_POST['submit'])) 它的意思是不是判断是否配置了$_POST['submit'] 这个变量呢?如果有这个变量 在执行其它代码 应该这样用if(isset($_POS ...

随机推荐

  1. WPF常见主界面的布局

    一.概述 效果图: 暂时没做完,请等待 二.实现 (一)实现无边框窗口 原文:WPF 窗口去除顶部边框(正宗无边框) ============================ 最近在做一个大屏展示视频 ...

  2. jmeter创建时间函数

    固定格式的年月日 ${__time(yyyyMMdd,)} 20151214 //返回年月日 ${__time(HHmmss,)} 092816 //返回时分秒 ${__time(yyyyMMdd-H ...

  3. session前后台交互

    下面是需求需要,不同的人群进来显示不同,但是还必须是这个走到哪都的存在,不能说点击别的页面,下面红框处的数据就没有了,必须是存在的并且登陆的类型不一样,显示的也不一样,开始的时候想到的是直接调用方法, ...

  4. Linux定时执行PHP

    1.使用crond服务 crontab -e #编辑任务列表 crontab -l #展示任务列表 26 15 * * * /usr/local/php70/bin/php -q /data/www/ ...

  5. (转)前端开发-发布一个NPM包之最简单易懂流程

    原文地址:https://www.cnblogs.com/sghy/p/6829747.html 1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站 ...

  6. elasticsearch的CPU居高不下的问题

    最近项目中遇到一个令人头疼的问题,毕竟因为工作需要刚学elasticsearch,也没有去关注elasticsearch的配置问题,安装好默认把它当做数据库一样去使用,这导致接下来的项目直接挂掉... ...

  7. 生成免费SSL通配证书

    通过Let's Encrypt 生成免费SSL证书 有效期是3个月 1.下载工具certbot-auto wget https://dl.eff.org/certbot-auto chmod +x c ...

  8. Charles SSL

    1 enable SSL 2 chls.pro/ssl  to install certificate 3 General -> About -> Certificate Trust Se ...

  9. 通过View.post()获取View的宽高

    在Android里,获取View宽高的时机是个老生常谈的话题了.众所周知,在Oncreate里直接调用View.getWidth或者View.getMeasuredWidth返回都是0.所以获取宽高时 ...

  10. 记一次WordPress 安装的过程

    安装WordPress你我他大家都会,记得10年的时候,哥已经玩转WordPress.dedecms.sns,那为何现在要记一次WordPress安装过程呢? 因为现在不会了! 之前安装都是在Wind ...