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& ...
随机推荐
- CodeForces 609C Load Balancing
先算出目标状态,然后拿当前状态与目标状态对比,即可算出答案 #include<cstdio> #include<cmath> #include<cstring> # ...
- iOS中"查看更多/收起"功能实现
实现效果如图: 查看更多功能在很多app种都有应用,在这里简单的实现,介绍实现流程: 一个tableViewCell中包含一个collectionView,"查看更多"按钮是tab ...
- Spark 的combineByKey函数
在Spark中有许多聚类操作是基于combineByKey的,例如group那个家族的操作等.所以combineByKey这个函数也是比较重要,所以下午花了点时间看来下这个函数.也参考了http:// ...
- 五、pig学习
一.什么是pig 1.pig和sql.map-reduce的关系 来自为知笔记(Wiz)
- mongodb 压缩——3.0+支持zlib和snappy
转自:https://scalegrid.io/blog/enabling-data-compression-in-mongodb-3-0/ MongoDB 3.0 with the wired ti ...
- mysql show命令
MySQL中有很多的基本命令,show命令也是其中之一,在很多使用者中对show命令的使用还容易产生混淆,本文汇集了show命令的众多用法. 1. show tables或show tables fr ...
- FireBug 调试工具(推荐)
Firebug是网页浏览器 Mozilla Firefox 下的一款开发类扩展,如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利. 安装如下: 下面是 ...
- WINDOWS下搭建SVN服务器端的步骤分享(Subversion)
1.获取svn程序 2.安装 Subversion(以下简称SVN)的服务器端和客户端.下载下来的服务器端是个 zip压缩包,直接解压缩即可,比如我解压到 E:\subversion .客户端安装文件 ...
- JQuery EasyUI DataGrid 获取属性值
在Jquery EasyUI中返回操作的时候,根据当前页返回到数据选取页: var grid = $('#datagrid'); var options = grid.datagrid('getPag ...
- [Angular Tutorial] 4 - Directory and File Organization
在这一步中,我们将不会在我们的应用中添加任何新功能,相反,我们打算退回一步,重构我们的代码库,移动我们的代码和文件,以此来使我们的应用更具易扩展性和可维护性. 在先前的步骤中,我们已经见识到了如何将我 ...