表单提交示例(Jsp+Servlet+jQueryForm)
内容前瞻
- 1、注意点
- 2、jQueryForm的使用
- 3、表单提交示例
环境
- 1、前端jsp
- 2、服务器tomcat
- 3、服务端servlet
- 4、使用tomcat发布项目的相对路径(你写代码的工程目录和发布到tomcat可以访问的目录是不一样的)
注意点
1、引入jquery.form.js:(请百度下载)
//在jsp的头部引入此文件,form/这个是我的本地相对路径
<script src="jquery.form.js"></script>
2、经常遇到的错误:
Uncaught TypeError: $(...).ajaxForm is not a function
- 1、没有引入jquery.form.js
//引入
<script type="text/javascript" src="你的路径/jquery.form.js"></script>
- 2、引入了jquery.form.js但是位置不对
jquery.min.js要在jquery.form.js之前引入
- 3、jquery.min.js的版本不够新
直接下载个最新版jquery.min.js本引入
jQueryForm的使用
方法1:
$(document).ready(function () {
var options = {
success: function (data) {
$("#responseText").text(data);
}
};
// ajaxForm
$("#form1").ajaxForm(options);
// ajaxSubmit
$("#btnAjaxSubmit").click(function () {
$("#form1").ajaxSubmit(options);
});
});
方法2:
$(document).ready(function () {
$("#id_form_addUserInfo").ajaxForm({
beforeSubmit:function(){
console.log("form_ beforeSubmit");
var submitFlag = false;
submitFlag = true;
//这里可以做一些表单填写的检查,比如名字不能为空,不为空返回true
if(!submitFlag){
alert("提交失败,请检查你的提交内容");
}
console.log("form submitFlag:"+submitFlag);
return submitFlag;
},
success:function(data){
console.log("form success");
//data是后台返回的json
},
error:function(data){
console.log("form error");
}
})
});
});
表单提交示例(使用jqueryForm)
页面先定义form,然后定义form的内部结构,比如单选框,多选框,然后提交,后台servlet捕获请求,获取提交的内容进行逻辑处理,并返回相应的信息给页面