Jquery ajaxSubmit()使用案例以及遇到的问题解决方案
来源:互联网 发布:大班mg红异端淘宝 编辑:程序博客网 时间:2024/06/05 22:56
首先说明我是在JSP中使用ajaxSubmit()的,我的目的是在jsp页面提交表单到servlet,保证当前页面不刷新且不跳转。
遇到了好多问题,第一个问题就是百度了很多ajaxSubmit()用法,也是各种奇葩,种种坑爹的用法我就不一一列举了,避免看到我博客的人跟我一样遇到很多烦心的为题,直接贴上我的用法:
1.在html页面中引入以下两个.js文件,注意路径
<span style="font-family: Arial, Helvetica, sans-serif;"><script type="text/javascript" src="assets/js/jquery-2.0.3.min.js"></script></span>
<script type="text/javascript" src="assets/js/jquery-form.js"></script>
备注:JQuery的版本要在1.5及1.5以上,原因可以看如下加大红色字体,官方解释如下:
<span style="font-size: 14px;">/*! * </span><strong><span style="font-size:24px;color:#cc0000;">jQuery Form Plugin</span></strong><span style="font-size: 14px;"> * version: 3.18 (28-SEP-2012) * @</span><span style="font-size:24px;color:#cc0000;"><strong>requires jQuery v1.5 or later</strong></span><span style="font-size: 14px;"> * * Examples and documentation at: http://malsup.com/jquery/form/ * Project repository: https://github.com/malsup/form * Dual licensed under the MIT and GPL licenses: * http://malsup.github.com/mit-license.txt * http://malsup.github.com/gpl-license-v2.txt *//*global ActiveXObject alert */</span>
2.html中表单元元素如下:
<form id="surveyForm">............ <button id="btnSubmit">Save </button> .........</form>
3.<script>中写法
<script type="text/javascript">$(document).ready(function(){$("#btnSubmit").click(function(){var options = { type: 'post',//提交方式 url: 'SurveyServlet', data : '{"user":"123","psw":"435"}', success: function() {alert('Thanks for your comment!');} }; $("#surveyForm").ajaxSubmit(options); // jquery 表单提交 return false; // 必须返回false,否则表单会自己再做一次提交操作,并且页面跳转 });});</script>
4.为了测试的确将表单提交到Servlet中,我在Servlet中写了如下代码测试:
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {System.out.println("跳转过来了!!!!!");}只要提交到SurveyServlet中,就会在控制台打印“跳转过来了!!!!!”
5.此时你在浏览器中测试,会发现没有反应,后台控制台啥都没打印出来,说明数据没有提交过去,在这个问题上我花了3个小时,可能是我太菜鸡了,于是我找各种原因,花了三个小时解决了这个问题,只能说皇天不负有心人有心人,我无意中在浏览器按下F12看下控制塔中发现了如下的问题:
我想了下,我的js文件都导入了,怎么会找不到方法呢,后来我就去百度“$(...).ajaxSubmit is not a function”,说实话真的找到了,如下:
在这不是打广告,虽然百度因为竞价排名名声扫地,不过我还是很感谢百度的,我大学中“最好的老师”,给它一点支持,不好的都会过去的,O(∩_∩)O哈哈~,OK继续写我的博客,给出两条我找到结果的文章链接如下:
http://blog.csdn.net/lnluo_21/article/details/8270544http://blog.sina.com.cn/s/blog_9255973f0101flkz.html总体什么意思呢,就是我在主页面中嵌入了一段页面代码如下:
就是我在home.jsp页面中插入了survey.jsp页面,在survey.jsp页面中使用了Jquery form.js,Jquery.js框架,而home.jsp中可能也使用了这两种框架,然而在浏览器中,这两个页面是被当做一个页面显示的,所以起了冲突(别人的解释,哈哈我也就这么理解了);
解决方法如下:
在home.jsp页面中插入:
<span style="font-family: Arial, Helvetica, sans-serif;"><script type="text/javascript" src="<%=request.getContextPath()%>/assets/js/jquery-form.js"></script></span>问题迎刃而解,测试结果图如下,(*^__^*) 嘻嘻……
前后花了我一天的时间,不过搞定了还是很激动\(≧▽≦)/ 的,IT小松鼠继续加油↖(^ω^)↗!!!!!!
鼓励下自己,分享使我快乐,如果后来者看到我的博客有对“上面我提到的框架冲突”有更好的解释欢迎与我交流。
0 0
- Jquery ajaxSubmit()使用案例以及遇到的问题解决方案
- jQuery使用ajaxSubmit()提交表单以及AjaxSubmit的一些用法
- jquery.form.js ajaxSubmit()使用案例
- jaxb 使用遇到的问题解决的方案
- 使用pietty遇到的问题解决方案
- ubuntu使用中遇到的问题解决方案
- $("#id").ajaxSubmit()使用自己遇到的问题
- jquery.form.js的ajaxSubmit使用
- truncate table 遇到的外键被使用问题解决方案。
- asp.net使用office遇到的权限问题解决方案
- ubuntu安装和使用appium遇到的问题解决方案
- EMQ错误集锦和使用遇到的问题解决方案
- Jquery 中 ajaxSubmit使用讲解
- Jquery 中 ajaxSubmit使用讲解
- Jquery 中 ajaxSubmit使用讲解
- Jquery 中 ajaxSubmit使用讲解
- Jquery 中 ajaxSubmit使用讲解
- Jquery 中 ajaxSubmit使用讲解
- Python正则表达式的七个使用范例
- 寄十月一日黎平兄弟
- HDU 5963 思维题
- ios 牛人技术博客列表
- 如何在一个页面添加多个文件上传控件
- Jquery ajaxSubmit()使用案例以及遇到的问题解决方案
- 图论总结
- 第十一周 项目1-验证算法(2)--二叉树的构造算法认证
- DatabaseMetaData 有关整个数据库的信息:表名、表的索引、数据库产品的名称和版本、数据库支持的操作
- Java for Web学习笔记(三二):JSTL(8)XML Tag
- java攻城狮所需养料
- Linux指令
- mysql创建索引操作
- 《C与指针》前三章总结