<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试表单</title>
<script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/icon.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/default/easyui.css">
<script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script> </head>
<body>
<script type="text/javascript"> $(function(){ $("#fm").panel({
width:300,
height:400,
title:'登录框'
}); $("#bt").linkbutton({
width:100
});
$('#bt').click(function(){
$("#myform").form('submit');
return false;
}); $("#myform").form({
url:'TestSubmit',
onSubmit:function(){
//alert('表单测试');
var isValid = $(this).form('validate');
if(!isValid)
{
$.messager.show({title:'信息',msg:'输入有误'});
return false
}
},
novalidate:false,
success:function(data){ var data = eval('('+ data + ')');
if(data.success == true)
{
$.messager.show({title:'信息', msg:data.message});
}
alert(data.message);
}
}); }); </script>
<div id="fm">
<form id="myform">
<table> <tr>
<td>用户名称:</td>
<td><input class="easyui-textbox"
data-options="required:true,validType:'length[2,5]'"></td>
</tr>
<tr>
<td>用户邮箱:</td>
<td><input class="easyui-textbox"
data-options="required:true,validType:'email',missingMessage:'dddd'"></td>
</tr>
<tr>
<td>用户主页:</td>
<td><input class="easyui-textbox"
data-options="required:false,validType:'url',invalidMessage:'xxxx',iconCls:'icon-search',prompt:'http://开头'"></td>
</tr>
<tr>
<td>密码:</td>
<td><input class="easyui-textbox"
data-options="required:true,validType:'length[6,10]',type:'password'"></td>
</tr>
<tr>
<td>年龄:</td>
<td><input class="easyui-numberbox"
data-options="required:true,max:90"></td>
</tr>
<tr>
<td>工资:</td>
<td><input class="easyui-numberbox"
data-options="required:true,max:10000,prefix:'$',precision:2"></td>
</tr>
<tr>
<td>日期:</td>
<td><input class="easyui-datebox"
data-options="required:true,editable:false"></td>
</tr>
<tr>
<td>时间:</td>
<td><input class="easyui-datetimebox"
data-options="required:true,editable:false"></td>
</tr>
<tr>
<td>城市:</td>
<td><select class="easyui-combobox" style="width:100px;"
>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option> </select></td>
</tr>
<tr>
<td>城市1:</td>
<td><input id="yiji" class="easyui-combobox" style="width:100px;"
data-options="valueField:'id',
textField:'name',
url:'jsonMembers?pid=0',
editable:false,
value:-1,
onSelect: function(rec){ var url = 'jsonMembers?pid='+rec.id;
$('#erji').combobox('setValue','-1');
$('#erji').combobox('reload', url);
$('#sanji').combobox('setValue','-1');
$('#sanji').combobox('reload','jsonMembers');
}" >
</td>
</tr>
<tr>
<td>城市2:</td>
<td><input id="erji" class="easyui-combobox" style="width:100px;"
data-options="valueField:'id',textField:'name',editable:false,
value:'未选择',
onSelect: function(rec){
var url = 'jsonMembers?pid='+rec.id;
$('#sanji').combobox('setValue','-1');
$('#sanji').combobox('reload', url);
}" >
</td>
</tr>
<tr>
<td>城市3:</td>
<td><input id="sanji" class="easyui-combobox" style="width:100px;"
data-options="valueField:'id',textField:'name',editable:false,value:'未选择'" >
</td>
</tr>
<tr>
<td colspan="2" align="center"><a href="#" id="bt">提交</a></td>
</tr>
</table> </form>
</div> </body>
</html>
Servlet
package com.hanqi; import java.io.IOException;
import java.util.ArrayList; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import com.alibaba.fastjson.JSON; /**
* Servlet implementation class jsonMembers
*/
@WebServlet("/jsonMembers")
public class jsonMembers extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public jsonMembers() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//接收地区父id
String pid = request.getParameter("pid"); //防止直接运行该页
if(pid == null || pid.trim().length() == 0)
{
pid = "-1";
} try {
//声明Member的集合类
ArrayList<Member> arr; //实例化数据库操作类
AreaDao ad = new AreaDao(); //调用查询方法,获得数据库记录
arr = ad.selArea(Integer.parseInt(pid)); //声明要向前台输出的字符串
String str = ""; //如果没有查到记录
if(arr == null)
{
//实例化ArrayList
arr = new ArrayList<Member>();
} //实例化实体类
Member m = new Member(); //添加未选择时显示的内容
m.setId(-1);
m.setName("未选择");
arr.add(0,m); //将ArrayList转换成json字符串
str = JSON.toJSON(arr).toString();
//str = JSON.toJSONString(arr); //向前台输出json字符串
response.getWriter().print(str); }catch (Exception e) { response.getWriter().append(e.getMessage());
} //response.getWriter().append("Served at: ").append(request.getContextPath());
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
} }
![[原创]java WEB学习笔记49：文件上传基础，基于表单的文件上传,使用fileuoload 组件](https://www.kunjuke.com/file/css/thumb/4.jpg/280-180.jpg)