1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <title>测试表单</title>
8 <script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.min.js"></script>
9 <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/icon.css">
10 <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/default/easyui.css">
11 <script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
12 <script type="text/javascript" src="js/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
13
14
15
16 </head>
17 <body>
18 <script type="text/javascript">
19
20 $(function(){
21
22 $("#fm").panel({
23 width:300,
24 height:400,
25 title:‘登录框‘
26 });
27
28 $("#bt").linkbutton({
29 width:100
30 });
31 $(‘#bt‘).click(function(){
32 $("#myform").form(‘submit‘);
33 return false;
34 });
35
36 $("#myform").form({
37 url:‘TestSubmit‘,
38 onSubmit:function(){
39 //alert(‘表单测试‘);
40 var isValid = $(this).form(‘validate‘);
41 if(!isValid)
42 {
43 $.messager.show({title:‘信息‘,msg:‘输入有误‘});
44 return false
45 }
46 },
47 novalidate:false,
48 success:function(data){
49
50 var data = eval(‘(‘+ data + ‘)‘);
51 if(data.success == true)
52 {
53 $.messager.show({title:‘信息‘, msg:data.message});
54 }
55 alert(data.message);
56 }
57 });
58
59 });
60
61 </script>
62 <div id="fm">
63 <form id="myform">
64 <table>
65
66 <tr>
67 <td>用户名称:</td>
68 <td><input class="easyui-textbox"
69 data-options="required:true,validType:‘length[2,5]‘"></td>
70 </tr>
71 <tr>
72 <td>用户邮箱:</td>
73 <td><input class="easyui-textbox"
74 data-options="required:true,validType:‘email‘,missingMessage:‘dddd‘"></td>
75 </tr>
76 <tr>
77 <td>用户主页:</td>
78 <td><input class="easyui-textbox"
79 data-options="required:false,validType:‘url‘,invalidMessage:‘xxxx‘,iconCls:‘icon-search‘,prompt:‘http://开头‘"></td>
80 </tr>
81 <tr>
82 <td>密码:</td>
83 <td><input class="easyui-textbox"
84 data-options="required:true,validType:‘length[6,10]‘,type:‘password‘"></td>
85 </tr>
86 <tr>
87 <td>年龄:</td>
88 <td><input class="easyui-numberbox"
89 data-options="required:true,max:90"></td>
90 </tr>
91 <tr>
92 <td>工资:</td>
93 <td><input class="easyui-numberbox"
94 data-options="required:true,max:10000,prefix:‘$‘,precision:2"></td>
95 </tr>
96 <tr>
97 <td>日期:</td>
98 <td><input class="easyui-datebox"
99 data-options="required:true,editable:false"></td>
100 </tr>
101 <tr>
102 <td>时间:</td>
103 <td><input class="easyui-datetimebox"
104 data-options="required:true,editable:false"></td>
105 </tr>
106 <tr>
107 <td>城市:</td>
108 <td><select class="easyui-combobox" style="width:100px;"
109 >
110 <option>1</option>
111 <option>2</option>
112 <option>3</option>
113 <option>4</option>
114
115
116 </select></td>
117 </tr>
118 <tr>
119 <td>城市1:</td>
120 <td><input id="yiji" class="easyui-combobox" style="width:100px;"
121 data-options="valueField:‘id‘,
122 textField:‘name‘,
123 url:‘jsonMembers?pid=0‘,
124 editable:false,
125 value:-1,
126 onSelect: function(rec){
127
128 var url = ‘jsonMembers?pid=‘+rec.id;
129 $(‘#erji‘).combobox(‘setValue‘,‘-1‘);
130 $(‘#erji‘).combobox(‘reload‘, url);
131 $(‘#sanji‘).combobox(‘setValue‘,‘-1‘);
132 $(‘#sanji‘).combobox(‘reload‘,‘jsonMembers‘);
133 }" >
134 </td>
135 </tr>
136 <tr>
137 <td>城市2:</td>
138 <td><input id="erji" class="easyui-combobox" style="width:100px;"
139 data-options="valueField:‘id‘,textField:‘name‘,editable:false,
140 value:‘未选择‘,
141 onSelect: function(rec){
142 var url = ‘jsonMembers?pid=‘+rec.id;
143 $(‘#sanji‘).combobox(‘setValue‘,‘-1‘);
144 $(‘#sanji‘).combobox(‘reload‘, url);
145 }" >
146 </td>
147 </tr>
148 <tr>
149 <td>城市3:</td>
150 <td><input id="sanji" class="easyui-combobox" style="width:100px;"
151 data-options="valueField:‘id‘,textField:‘name‘,editable:false,value:‘未选择‘" >
152 </td>
153 </tr>
154 <tr>
155 <td colspan="2" align="center"><a href="#" id="bt">提交</a></td>
156 </tr>
157 </table>
158
159 </form>
160 </div>
161
162 </body>
163 </html>
Servlet
1 package com.hanqi;
2
3 import java.io.IOException;
4 import java.util.ArrayList;
5
6 import javax.servlet.ServletException;
7 import javax.servlet.annotation.WebServlet;
8 import javax.servlet.http.HttpServlet;
9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11
12 import com.alibaba.fastjson.JSON;
13
14 /**
15 * Servlet implementation class jsonMembers
16 */
17 @WebServlet("/jsonMembers")
18 public class jsonMembers extends HttpServlet {
19 private static final long serialVersionUID = 1L;
20
21 /**
22 * @see HttpServlet#HttpServlet()
23 */
24 public jsonMembers() {
25 super();
26 // TODO Auto-generated constructor stub
27 }
28
29 /**
30 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
31 */
32 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
33 // TODO Auto-generated method stub
34 //接收地区父id
35 String pid = request.getParameter("pid");
36
37 //防止直接运行该页
38 if(pid == null || pid.trim().length() == 0)
39 {
40 pid = "-1";
41 }
42
43 try {
44 //声明Member的集合类
45 ArrayList<Member> arr;
46
47 //实例化数据库操作类
48 AreaDao ad = new AreaDao();
49
50 //调用查询方法,获得数据库记录
51 arr = ad.selArea(Integer.parseInt(pid));
52
53 //声明要向前台输出的字符串
54 String str = "";
55
56 //如果没有查到记录
57 if(arr == null)
58 {
59 //实例化ArrayList
60 arr = new ArrayList<Member>();
61 }
62
63 //实例化实体类
64 Member m = new Member();
65
66 //添加未选择时显示的内容
67 m.setId(-1);
68 m.setName("未选择");
69 arr.add(0,m);
70
71 //将ArrayList转换成json字符串
72 str = JSON.toJSON(arr).toString();
73 //str = JSON.toJSONString(arr);
74
75 //向前台输出json字符串
76 response.getWriter().print(str);
77
78 }catch (Exception e) {
79
80 response.getWriter().append(e.getMessage());
81 }
82
83
84 //response.getWriter().append("Served at: ").append(request.getContextPath());
85 }
86
87 /**
88 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
89 */
90 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
91 // TODO Auto-generated method stub
92 doGet(request, response);
93 }
94
95 }
时间： 2024-10-20 12:20:33