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

首先说明我是在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[/code]总体什么意思呢，就是我在主页面中嵌入了一段页面代码如下： 


就是我在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小松鼠继续加油↖(^ω^)↗！！！！！！

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