文档章节

15.EASYUI Form表单组件Java后台交互

F
 Favour
发布于 2016/08/15 17:21
字数 1456
阅读 55
收藏 1
点赞 0
评论 0

一,基本表单组件

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Form - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>基本表单组件</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>填写表单,然后提交.</div>
	</div>
	<div style="margin:10px 0;"></div>
	<div class="easyui-panel" title="发表主题" style="width:400px">
		<div style="padding:10px 0 10px 60px">
	    <form id="ff" action="form" method="post" >
	    	<table>
	    		<tr>
	    			<td>姓名:</td>
	    			<td><input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
	    		</tr>
	    		<tr>
	    			<td>Email:</td>
	    			<td><input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
	    		</tr>
	    		<tr>
	    			<td>主题:</td>
	    			<td><input class="easyui-validatebox" type="text" name="subject" data-options="required:true"></input></td>
	    		</tr>
	    		<tr>
	    			<td>内容:</td>
	    			<td><textarea name="message" style="height:60px;"></textarea></td>
	    		</tr>
	    		<tr>
	    			<td>语言:</td>
	    			<td>
	    				<select class="easyui-combobox" name="language"><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select>
	    			</td>
	    		</tr>
	    	</table>
	    </form>
	    </div>
	    <div style="text-align:center;padding:5px">
	    	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
	    	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>
	    </div>
	</div>
	<script>
		function submitForm(){
			$('#ff').form('submit');
		}
		function clearForm(){
			$('#ff').form('clear');
		}
	</script>
</body>
</html>

二,加载表单数据

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Form - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>加载表单数据</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>点击下面按钮加载数据.</div>
	</div>
	<div style="margin:10px 0;">
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="loadLocal()">加载本地</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="loadRemote()">加载远程</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>
	</div>
	<div class="easyui-panel" title="发表主题" style="width:400px">
		<div style="padding:10px 0 10px 60px">
	    <form id="ff" method="post">
	    	<table>
	    		<tr>
	    			<td>姓名:</td>
	    			<td><input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
	    		</tr>
	    		<tr>
	    			<td>Email:</td>
	    			<td><input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
	    		</tr>
	    		<tr>
	    			<td>主题:</td>
	    			<td><input class="easyui-validatebox" type="text" name="subject" data-options="required:true"></input></td>
	    		</tr>
	    		<tr>
	    			<td>内容:</td>
	    			<td><textarea name="message" style="height:60px;"></textarea></td>
	    		</tr>
	    		<tr>
	    			<td>语言:</td>
	    			<td>
	    				<select class="easyui-combobox" name="language"><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select>
	    			</td>
	    		</tr>
	    	</table>
	    </form>
	    </div>
	</div>
	<script>
		function loadLocal(){
			$('#ff').form('load',{
				name:'张三',
				email:'zhangsan@qq.com',
				subject:'张三的主题',
				message:'张三的内容',
				language:'en'
			});
		}
		function loadRemote(){
			$('#ff').form('load', '../FormAjax/form_data1.json');
		}
		function clearForm(){
			$('#ff').form('clear');
		}
	</script>
</body>
</html>

三,AJAX表单提交(Java后台交互)

<%@ page language="java" import="java.util.*" 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">  
    <meta name="keywords" content="jquery,ui,easy,easyui,web">  
    <meta name="description" content="easyui help you build your web page easily!">  
    <title>Ajax Form - jQuery EasyUI Demo</title>  
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>  
<body>  
    <h2>AJAX表单提交</h2>  
    <div class="demo-info" style="margin-bottom:10px">  
        <div class="demo-tip icon-tip">&nbsp;</div>  
        <div>填写表单,然后提交.</div>  
    </div>  
      
    <div class="easyui-panel" title="Ajax表单" style="width:230px;padding:10px;">  
        <form id="ff" action="../form" method="post">  
            <table>  
                <tr>  
                    <td>姓名:</td>  
                    <td><input name="name" type="text"></input></td>  
                </tr>  
                <tr>  
                    <td>Email:</td>  
                    <td><input name="email" type="text"></input></td>  
                </tr>  
                <tr>  
                    <td>电话</td>  
                    <td><input name="phone" type="text"></input></td>  
                </tr>  
                <tr>  
                    <td></td>  
                    <td><input type="submit" value="提交"></input></td>  
                </tr>  
            </table>  
        </form>  
    </div>  
    <script type="text/javascript">  
        $(function(){  
            $('#ff').form({  
                success:function(data){  
                    $.messager.alert('系统提示', data, 'info');  
                }  
            });  
        });  
    </script>  
</body>  
</html>  

XML

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>FormServlet</servlet-name>
    <servlet-class>web.FormServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>FormServlet</servlet-name>
    <url-pattern>/form</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

SERVLET

package web;

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;

public class FormServlet extends HttpServlet{

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		System.out.println("姓名:"+request.getParameter("name"));
		System.out.println("Email:"+request.getParameter("email"));
		System.out.println("电话:"+request.getParameter("phone"));
		
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out=response.getWriter();
		out.println("ajax提交成功");
		out.flush();
		out.close();
	}

}

 

© 著作权归作者所有

共有 人打赏支持
F
粉丝 4
博文 185
码字总数 96673
作品 0
成都
程序员
jQuery Validation Engine 表单验证

<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.validationEngine-en.js" type="text/javascript"></script><script src="js/jquery.validationEngine......

MLeo
2013/01/18
0
0
DaiZhiYi/Ffast-FE

Ffast-FE 基于vue iview后台管理系统前端快速开发解决方案 Build Setup # install dependenciesnpm install or yarn # serve with hot reload at localhost:8000npm run dev # build for pro......

DaiZhiYi
06/08
0
0
springmvc请求接收参数的几种方法

通过@PathVariabl注解获取路径中传递参数 转载请注明出处:springmvc请求接收参数的几种方法 代码下载地址:http://www.zuidaima.com/share/1751862044773376.htm JAVA [java] view plainco...

boonya
2014/10/23
0
0
extjs中OA管理中组织和用户关系左右选择组件的运用

我完成的效果是: 这里点击左边的树是联动右边itemselector 组件中的用户,并且带有用户搜索 一:废话不多,贴上js代码:

EDIAGD
2013/02/25
0
0
spring MVC 文件上传

参考博文:http://tzwzero-163-com.iteye.com/blog/1697184 ----------------------------------------以下是该文引用,红色部分是我添加了一句话--------------------------------- 必须明确......

vvx1024
2014/07/14
0
4
SpringMVC之接收请求参数和页面传参

Spring接收请求参数 1,使用HttpServletRequest获取 Java代码 @RequestMapping("/login.do") public String login(HttpServletRequest request){ String name = request.getParameter("name")......

白志华
2015/09/23
0
0
一篇偏激的项目总结和PPT——数据驱动型的网站开发的几个问题和讨论。

所谓数据驱动型的网站,其实就是常见的MIS系统在B/S形式下的实现。B/S模式在90年年代末大量出现的时候,其主要特征是Page-Based,也就是基于页面的。因为Html技术的网站本身是一张一张的页面...

Brin想写程序
2014/04/18
0
2
Tomcat进程意外退出的问题分析

节前某个部门的测试环境反馈tomcat会意外退出,我们到实际环境排查后发现不是jvm crash,日志里有进程销毁的记录,从pause到destory的整个过程: org.apache.coyote.AbstractProtocol pause...

陶邦仁
2015/03/24
0
1
新版360UI框架,即QUI终于完工

两年前我曾发布一款名为QUI的前端框架V2.0版,掀起过一阵使用热潮,下载量也突破了一万大关。不过最终得到的评价是毁誉参半,喜欢的人说它的界面美观,组件使用简单方便,不喜欢的人说浏览器...

阿东2020
2013/05/04
0
0
通过 HttpAuthenticationMechanism 执行 Web 身份验证

通过 Java EE 8 中新的注解驱动的 HTTP 身份验证机制执行经典和自定义的 Servlet 身份验证 系列内容: 此内容是该系列 4 部分中的第 # 部分: Java EE 8 Security API 入门,第 2 部分 http...

Alex Theedom
04/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

分布式之抉择分布式锁

前言: 目前网上大部分的基于zookpeer,和redis的分布式锁的文章都不够全面。要么就是特意避开集群的情况,要么就是考虑不全,读者看着还是一脸迷茫。坦白说,这种老题材,很难写出新创意,博...

Java大蜗牛
8分钟前
0
0
rm: cannot remove `xxx’: Operation not permitted

rm: cannot remove `xxx': Operation not permitted可以先用lsattr xxx查看文件的隐藏属性。如果看到-----a-------的情况,可以用chattr -a xxx去除a属性,然后再进行删除就可以了....

殘留回憶
8分钟前
0
0
oracle 如何查看当前用户的表空间名称

如何查询当前用户的表空间名称?因为oracle建立索引,需要知道当前用户的表空间,查找了一下资料 --查询语法-- select default_tablespace from dba_users where username='登录用户' 如,...

youfen
12分钟前
0
0
MicroPython-TPYBoard开发板DIY小型家庭气象站

对于喜欢登山的人来说,都会非常关心自己所处的高度跟温度,海拔高度的测量方法,海拔测量一般常用的有两种方式,一是通过GPS全球定位系统,二是通过测出大气压,根据气压值算出海拔高度。 ...

bodasisiter
12分钟前
0
0
抓取沪A股票资金流向数据

library(rvest)mydata<-list()day1<-Sys.Date()day2<-Sys.Date()-7stock<-c("600695","600734","603693","601990","603650","603045","603895","600735","601999","603970","600619"......

cuyi
13分钟前
0
0
Java中mqtt消息队列发送和订阅消息

1.首先本地建立mqtt协议的服务器 2.直接上代码 package io.powerx.test;import java.util.Date;import org.eclipse.paho.client.mqttv3.IMqttDeliveryToken;import org.eclipse.p......

江湖鱼大虾
14分钟前
0
0
数据结构-树的学习

1. 相关连接 维基-二叉搜索树 维基-红黑树 思否-红黑树

liuyan_lc
16分钟前
0
0
Nginx upstream 负载均衡

Nginx upstream 负载均衡 了了情空 关注 2016.05.31 16:16* 字数 612 阅读 537评论 1喜欢 0 上周五同事跟我提一个需求,大概描述是酱紫:“我们现在终端都在访问同一台服务器,如果流量过大造...

linjin200
18分钟前
0
2
Dubbo 源码解读——自定义 Classloader 之 ExtensionLoader

众所周知,Dubbo 是阿里巴巴公司自主研发开源的一个高性能的服务框架(现已捐献给 Apache 基金会组织),应用之间可以通过 RPC 的方式来互相调用并返回结果。主要基于 Java 语言开发,它提供...

Ryan-瑞恩
25分钟前
0
0
Sonar Maven/IDEA集成(未完待续)

前言:在上一篇(SonarQube安装步骤)的基础上,我们来集成maven/IDEA 1.首先是集成maven(maven的安装配置就不多说了) 找到maven安装目录下-conf文件夹-setting.xml文件 然后添加以下配置信...

张艺兴女朋友
26分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部