表单提交示例（Jsp+Servlet+jQueryForm）
2017-06-20 17:40
477 查看
表单提交示例（Jsp+Servlet+jQueryForm）
内容前瞻
1、注意点2、jQueryForm的使用
3、表单提交示例
环境
1、前端jsp2、服务器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 + "]";
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JSP动态action参数提交form表单到springMVC的示例
- 验证码刷新与提交示例（Jsp+Servlet+jquery+ajax）
- jQuery使用ajaxSubmit()提交表单示例==引入jquery.form.js插件(专门提交表单)
- Java ajax servlet 无法接收到 jsp 以post提交的 form 表单信息 可能的解决方案（都是工具惹得祸！）
- jquery提交form表单简单示例分享
- 使用jquery.form.js实现form表单无刷新提交简单示例
- jquery提交form表单简单示例分享
- 在 jsp 中提交 form 表单到action ; 无刷新上传; 注意和servlet 上传区别;
- 使用jquery.form.js实现form表单无刷新提交简单示例
- 如何在servlet中获取jsp中form表单提交的变量，以及jsp与servlet之间的数据传递
- JSP+Servlet学习经验1：解决form表单提交后相应页面中文乱码的问题
- JQuery Form Ajax提交Asp.Net表单时的验证视图状态 MAC 失败
- 利用jQuery Form插件实现表单的ajax提交(原创)
- Jquery提交表单 Form.js官方插件介绍
- struts2/jsp 通过form表单方式或者js的方式提交请求，封装boolean值的问题
- jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
- jsp中form表单提交到serlvet中文乱码问题
- form 的 encoding设置不当导致在jsp中使用request.getParametre(paraName)无法获取表单提交的值
- jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例
- jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例