表单提交示例（Jsp+Servlet+jQueryForm）

表单提交示例（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捕获请求，获取提交的内容进行逻辑处理，并返回相应的信息给页面