Jquery ajaxSubmit()使用案例以及遇到的问题解决方案

13 篇文章 0 订阅
5 篇文章 0 订阅

首先说明我是在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/8270544
http://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小松鼠继续加油↖(^ω^)↗!!!!!!

鼓励下自己,分享使我快乐,如果后来者看到我的博客有对“上面我提到的框架冲突”有更好的解释欢迎与我交流。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值