ExtJS与后台Java交互
参考博客：http://blog.csdn.net/wanghuan203/article/details/8125970
开发环境：Eclipse + Tomcat + ExtJS6.0
工程目录结构
运行效果：
后台获取的数据
源代码如下：
1.web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>ExtJSDemo</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>TestServlet</servlet-name>
<servlet-class>com.scd.servlet.TestServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>TestServlet</servlet-name>
<url-pattern>/TestServlet</url-pattern>
</servlet-mapping>
</web-app>
2.ExtJava.jsp
<%@ 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>ExtJS And Java</title>
<link rel="icon" href="img/tomcat.ico" type="image/x-icon" ></link>
<link rel="stylesheet" type="text/css" href="neptune/theme-neptune/resources/theme-neptune-all.css"></link>
<script type="text/javascript" src="neptune/ext-all.js"></script>
<!--extjs本地化文件,会将extjs中的提示信息等自动转换为简体中文-->
<script type ="text/javascript" src="neptune/locale/locale-zh_CN.js"></script>
<script type ="text/javascript">
Ext.onReady(
function() {
Ext.create('Ext.container.Viewport',
{
scrollable : true,
items : [
{
xtype : 'container',
layout : {
type : 'hbox',
align : 'center',
pack : 'center'
},
items : [
{
xtype : 'form',
bodyPadding : 20,
maxWidth : 700,
fieldDefaults : {
msgTarget : 'under'
},
flex : 1,
title : 'Customer Register',
items : [
{
xtype : 'fieldcontainer',
layout : 'hbox',
fieldLabel : 'Name',
defaultType : 'textfield',
defaults : {
allowBlank : false,
flex : 1
},
items : [
{
name : 'Name',
emptyText : 'Name'
}
]
},
{
xtype : 'datefield',
fieldLabel : 'Date of Birth',
name : 'dob',
maxValue : new Date()
},
{
xtype : 'textfield',
vtype : 'email',
fieldLabel : 'Email Address',
name : 'email',
allowBlank : false,
//emptyText : 'user@example.com'
},
{
xtype : 'textfield',
fieldLabel : 'Phone Number',
labelWidth : 100,
name : 'phone',
width : 200,
emptyText : 'xxx-xxx-xxxx',
maskRe : /[\d\-]/,
regex : /^\d{3}-\d{3}-\d{4}$/
},
{
xtype : 'button',
href : 'http://www.baidu.com',
width : 100,
height : 60,
text : 'Baidu'
}
],
//form提交数据部分，通过按钮提交事件
buttons : [
{
text : 'Submit',
handler : function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit(
{
url : './TestServlet',
//重点: success块
success : function(form, action) {
//showmessage是从后台传过来
Ext.MessageBox.alert("提示", action.result.showmessage);
},
failure : function(form, action) {
Ext.Msg.alert("提示", "失败");
}
}
);
} else {
Ext.Msg.alert('Error', 'Fix the errors in the form');
}
}
}
]
}
]
}
]
}
);
}
);
</script>
</head>
<body>
</body>
</html>
3.TestServlet.java
package com.scd.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class TestServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
/**
*
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("===doPost==========");try{
//调用action等后台方法
//有个返回值,返回给界面的内容
String showMessage = "你好";
//设置response格式
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json");
response.getWriter().write(
"{'success':true,'showmessage':'"+ showMessage +"'}");
} catch (Exception e) {
//失败时返回的信息
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html");
response.getWriter().write(
"{'success':false,'showmessage':'出现异常,操作失败'}");
response.setStatus(500);
}
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("====I am doGet======");
doPost(request,response);
}
}
存在一个很大的疑惑就是当把代码里面的response.setContentType("text/html"); 设置为"text/html"之后，获取到的是表但数据
package com.scd.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class TestServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
/**
*
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("===doPost==========");
System.out.println("获取前端form组件中的数据");
String Name = request.getParameter("Name");
String bob = request.getParameter("dob");
String email = request.getParameter("email");
String phone = request.getParameter("phone");
System.out.println(Name+bob+email+phone);
try{
//调用action等后台方法
//有个返回值,返回给界面的内容
String showMessage = "你好";
//设置response格式
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html");
response.getWriter().write(
"{'success':true,'showmessage':'"+ showMessage +"'}");
} catch (Exception e) {
//失败时返回的信息
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html");
response.getWriter().write(
"{'success':false,'showmessage':'出现异常,操作失败'}");
response.setStatus(500);
}
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("====I am doGet======");
doPost(request,response);
}
}
终端输出的数据为
-----------------------------------
===doPost==========
获取前端form组件中的数据
chengdu17年01月18日1809542645@qq.com123-345-2341
和之前传输数据不一样啊？？？？
ExtJS与后台Java交互的更多相关文章
- jsp中的js嵌入Extjs与后台action交互
近期做前台须要和后台交互数据,直接使用js一直没实现.最后使用extjs实现了,extjs代码直接嵌入到jsp的js代码中就可以(0跟jsp里使用extjs一样,须要载入extjs的几个文件) < ...
- atitit.js 与c# java交互html5化的原理与总结.doc
atitit.js 与c# java交互html5化的原理与总结.doc 1. 实现html5化界面的要解决的策略1 1.1. Js交互1 1.2. 动态参数个数1 1.3. 事件监听2 2. sen ...
- Ajax与后台的交互
Ajax Java 交互 jsp代码 <%@ page language="java" import="java.util.*" pageEncoding ...
- atitit.js 与c# java交互html5化的原理与总结.doc
atitit.js 与c# java交互html5化的原理与总结.doc 1. 实现html5化界面的要解决的策略 1 1.1. Js交互 1 1.2. 动态參数个数 1 1.3. 事件监听 2 2. ...
- Android通过Web与后台数据库交互
2021.1.27 更新 已更新新版本博客,更新内容与原文章相比有点多,因此新开了一篇博客,请戳这里. 1 背景 开发一个App与后台数据库交互,基于MySQL+原生JDBC+Tomcat,没有使用D ...
- Flex使用Blazeds与Java交互及自定义对象转换详解-DATAGRID读取ORACLE数据
http://www.cnblogs.com/RocD-DuPeng/articles/1751040.html 一.建立Flex与Java交互的工程. 本文中讲到的交互是利用Blazeds的,因为这 ...
- 身份证校验，前台js校验，后台java校验
js校验: var vcity={ 11:"北京",12:"天津",13:"河北",14:"山西",15:"内 ...
- 利用angular与后台的交互
记录的世界是强大的,不管天南海北还是五湖四海,如果利用angular js与后台的交互.angular js 在api上称为是http服务: 下面咱给一个简单的代码看看:简单的利用后台与前端的tab切 ...
- --@angularJS--自定义服务与后台数据交互小实例
1.myService.html: <!DOCTYPE HTML><html ng-app="app"><head> <title& ...
随机推荐
- Android里merge和include标签的使用
1.使用<include /> 标签来重用layout代码 如果在一个项目中需要用到相同的布局设计,可以通过<include /> 标签来重用layout代码,该标签在andr ...
- IFeatureWorkspace OpenFeatureClass Example（转）
网络来源:http://changqingnew.blog.163.com/blog/static/1075233820103383633639/ //IFeatureWorkspace OpenFe ...
- hibernate--对象的三种状态Transient,Persistent,Detached
Transient:刚new出来的对象 Persistent: sava或者update之后的状态 Detached: close或者clear之后 test函数: @Test public void ...
- 控制流之while
while语句只要在一个条件为真的情况下,while语句允许你重复执行一块语句.while语句是所谓 循环 语句的一个例子.while语句有一个可选的else从句.使用while语句~~~~~~~~~ ...
- RSA实践指南
创建时间:2005-03-02 文章属性:原创 文章提交:watercloud (watercloud_at_xfocus.org) RSA算法基础->实践 讲讲自己学习RSA中的实践过程,已经 ...
- Android 5.0之前屏幕截图的方法
截图的几种方法 Android获取屏幕截图主要有以下三种方法 1.通过view.getDrawingCache()获取指定View的绘制缓存来实现截屏. 这种方式Android 5.0之前也可以,且不 ...
- iOS开发——绘图电池按百分比显示
1.在DrawLine.h文件中提供了一个改变电池电量数值的接口 // // DrawLine.h // Demo-draw2 // // Created by yyt on 16/5/11. ...
- SpringJDBC学习之路(1)
本人从事java开发也有一段时间了,项目开发也有好几个.但感觉所有写的代码无非就是搬数据取数据.service层写的逻辑多一点,最近做的一个项目整个项目的结构以及层次发现代码过于臃肿冗余.同样一个方法 ...
- iOS开发——Scheme白名单
问题:在iOS 9下涉及到平台客户端跳转,系统会自动到项目info.plist下检测是否设置平台Scheme.对于需要配置的平台,如果没有配置,就无法正常跳转平台客户端. 报错:This app is ...
- java.lang.UnsupportedClassVersionError: com/T : Unsupported major.minor version问题解决
编译的时候jdk版本为1.8 2.运行的时候jdk版本为1.7 解决办法:将编译的jdk版本降为1.7,问题解决