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

来源：互联网发布：35岁程序员职业规划编辑：程序博客网时间：2024/06/07 20:21

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

这里写图片描述

form.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" isELIgnored="false"%><%    String path = request.getContextPath();    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <base href="<%=basePath%>">         <title>提交</title>        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>        <script src="jquery.form.js"></script>    </head>    <body>        <!-- -- 华 -- 丽 -- 分 -- 割 -- 线 -- -->        <!-- action是提交的路径 -->        <form method="post" id="id_form" action="FormSerlvet">        <!-- text start -->        <div>            <label>请登录：</label>            <input type="text" id="name" name="name" placeholder="用户名" />        </div>        <!-- text end -->        <!-- password start -->        <div>            <label>密码：</label>            <input type="password" id="pwd" name="pwd" placeholder="密码" />        </div>        <!-- password end -->        <!-- select start -->        <div>            <label>选择：</label>            <select name="select">                <option>选项 1</option>                <option>选项 2</option>                <option>选项 3</option>            </select>        </div>        <!-- select end -->        <!-- checkbox start -->        <div>            <label>checkbox：</label>            <input name="checkbox_yes" type="checkbox" value="yes" >是</label>            <input name="checkbox_no" type="checkbox" value="no" >否</label>        </div>        <!-- checkbox end -->        <!-- radio start -->        <div>            <label>radio：</label>            <input name="radio" type="radio" value="male" >男</label>            <input name="radio" type="radio" value="female" >女</label>        </div>        <!-- radio end -->        <div >            <button class="btn btn-primary" type="submit">保存内容</button>            <button class="btn btn-white" type="reset">重置</button>        </div>        </form>        <!-- -- 华 -- 丽 -- 分 -- 割 -- 线 -- -->    </body>    <script type="text/javascript">        /**            ******  逻辑部分    ******          */        $(function () {            //id_form是表单的id            $("#id_form").ajaxForm({                //提交前，检查数据，return false则取消提交                beforeSubmit:function(){                    console.log("form beforeSubmit");                    /**                    var submitFlag = false;                    //填空检查,正则                    submitFlag =                         valueFormatCheck(                                    "^[\u4E00-\u9FA5A-Za-z0-9_]+$",                                    $("#name").val()) &&                        valueFormatCheck(                                    "^[0-9]{5,10}$",                                    $("#pwd").val());                    if(!submitFlag){                        alert("提交失败，请检查你的提交内容");                    }                    return submitFlag;                     **/                    return true;//为了方便测试，我就不检查了                },                //提交成功，数据返回                success:function(data){                    console.log("form success");                    //data的返回的json数据，status与content是我在后台自定义的数据的key                    alert("status:"+data.status+",content:"+data.content);                    //这个是刷新当前页面                    //window.location.href = window.location.href;                },                //提交失败，数据返回                error:function(data){                    console.log("form error");                }            });        });        /**            ******  工具部分    ******              */        //填空检查,正则        var valueFormatCheck = function (reg,checkValue) {            var flag = false;            if ("" != checkValue || checkValue.length>0) {                if (new RegExp(reg).test(checkValue)) {                    flag = true;                }            }            return flag;        };    </script></html>

FormServlet.java

package com.iamzhuwh.pmc;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.google.gson.Gson;/** * Servlet implementation class FormSerlvet *///@WebServlet("/FormSerlvet")public class FormSerlvet extends HttpServlet {    private static final long serialVersionUID = 1L;    public FormSerlvet() {        super();    }    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        doPost(request,response);    }    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        //解决乱码        request.setCharacterEncoding("utf-8");        response.setContentType("text/json;charset=utf-8");        //form表单的内容是以name作为key，通过request.getParameter来获取值的        //text，普通文本        String name = request.getParameter("name");        //password，密码        String pwd = request.getParameter("pwd");        //select，下拉        String select = request.getParameter("select");        //checkbox，多选        String checkboxYes = request.getParameter("checkbox_yes");        //checkbox，多选        String checkboxNo = request.getParameter("checkbox_no");        //radio，单选        String radio = request.getParameter("radio");        //        System.out.println("FormSerlvet name:"+name+",pwd:"+pwd+",select:"+select+",checkbox:"+checkboxYes+"/"+checkboxNo+",radio:"+radio);        //返回数据        String json = "";        PrintWriter writer = null;        try {            json = new Gson().toJson(new Result(1,"success"));            writer = response.getWriter();        } catch (Exception e) {            json = new Gson().toJson(new Result(0,"error"));            e.printStackTrace();        }finally {            writer.write(json);            if(writer!=null)writer.close();        }    }}/** * bean，数据返回对象 */class Result {    private int status;    private String content;    public Result() {        super();    }    public int getStatus() {        return status;    }    public void setStatus(int status) {        this.status = status;    }    public String getContent() {        return content;    }    public void setContent(String content) {        this.content = content;    }    public Result(int status, String content) {        super();        this.status = status;        this.content = content;    }    @Override    public String toString() {        return "Result [status=" + status + ", content=" + content + "]";    }}

阅读全文

0 0