`
eclipse_spring
  • 浏览: 117078 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

extjs和servlet的超级简单的数据交互

阅读更多
MyServlet的代码如下:
package com.test;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")
public class MyServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setContentType("text/html");
		response.setCharacterEncoding("UTF-8");
		String _str = "[{name:'唐伯虎',age:25,sex:'男'},{name:'楚留香',age:24,sex:'女'}]";
		response.getWriter().print(_str);
	}
	
}

并且在web.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>
		<servlet-name>myservlet</servlet-name>
		<servlet-class>com.test.MyServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>myservlet</servlet-name>
		<url-pattern>/myservlet</url-pattern>
	</servlet-mapping>
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
</web-app>

myserlvet.js的代码如下:
Ext.onReady(function() {
			var _store = new Ext.data.JsonStore({
						url : "http://localhost:8080/zz/myservlet",
						fields : ["name", "age", "sex"]
					});
			_store.load();
			_store.on("load", function() {
						alert(_store.getCount());
						alert(Ext.util.JSON.encode(_store.getAt(1).data));
						alert(_store.getAt(0).get("name"));
					});
});

最后敲入index.html
<html>
	<head>
		<title>index.html</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css"
			href="../extjs/resources/css/ext-all.css">
		<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="../extjs/ext-core.js"></script>
		<script type="text/javascript" src="../extjs/ext-all.js"></script>
		<script type="text/javascript" src="../js/myservlet.js"></script>
	</head>
	<body>
	</body>
</html>
  • 描述: 完整程序结构图
  • 大小: 28.3 KB
分享到:
评论
4 楼 敲你个头 2013-04-16  
您好,这个我用Extjs-4.1,好像一直报错
3 楼 nanjingkeke 2012-03-13  
真不错,好
2 楼 corelengine 2010-11-24  
有启发,在servlet中构造了数据
1 楼 ygswine 2009-08-31  
我真的是忍不住大声的说:  大哥 ,你真是我的再生大哥呀

相关推荐

    extjs和servlet数据交互的例子

    ExtJS是一个JavaScript框架,用于创建富客户端应用,它提供了丰富的组件和数据管理工具。在提供的 `myserlvet.js` 文件中,我们创建了一个 `JsonStore` 对象,它是ExtJS中用来存储和管理JSON数据的类。`JsonStore` ...

    extjs+servlet+json简单应用

    总结来说,"extjs+servlet+json简单应用"是利用ExtJS构建前端界面,通过Ajax与Servlet进行通信,Servlet处理业务逻辑并返回JSON数据,再由ExtJS解析并展示。这种方式让前后端职责明确,提高了代码的可维护性和扩展性...

    Extjs servlet实现列表显示简单例子

    总的来说,这个例子是学习ExtJS与Servlet集成的一个良好起点,涵盖了前端展示、后端处理和数据库交互的基本流程。通过实践这个例子,开发者可以深入理解这两者如何协同工作,为构建更复杂的Web应用打下坚实基础。

    extjs+servlet

    它提供了丰富的用户界面组件和数据管理功能。Servlet,则是Java平台上的一个标准,用于处理和生成HTTP请求,通常作为服务器端的程序接口。在"extjs + servlet"的整合中,ExtJS负责前端展示和交互,而Servlet则负责...

    ExtJs_servlet_JDBC 做的增删查改

    ExtJs、Servlet和JDBC是Web开发中的三个关键组件,它们在构建动态、交互式的Web应用程序时发挥着重要作用。下面将详细阐述这三个技术及其在"增删查改"(CRUD)操作中的应用。 首先,ExtJs是一个强大的JavaScript库...

    ExtJS+Servlet表单验证和注册

    通过HttpServletResponse对象设置响应内容,如状态码、响应头和数据。 3. **会话管理** Servlet可以管理HTTP会话,通过HttpSession接口创建和跟踪用户会话,存储和检索会话级数据。 4. **注册和部署** Servlet...

    ExtJs和Java通过Servlet交互实现数据库增删查改分页

    在IT领域,Web应用开发是不可或缺的一部分,而ExtJs、Java和Servlet的组合常常用于构建交互性强、功能丰富的前端和后端系统。本篇将详细探讨如何利用这些技术实现数据库的增删查改(CRUD)操作以及分页功能。 首先...

    Extjs 与后台交互的实例

    在这个实例中,Model代表用户数据,View是用户界面,Controller处理用户交互和数据更新。Servlet则扮演了控制器的角色,协调数据库和前端的交互。 6. **安全和性能优化**:在实际应用中,我们还需要考虑安全性,...

    使用extjs4+servlet对extjs中grid数据进行填并实现增删改查等功能!

    在IT行业中,Web开发是一项核心任务,而ExtJS和Servlet是两种常见的技术工具,用于构建交互性强、功能丰富的用户界面和后端数据处理。本文将详细介绍如何利用ExtJS4和Servlet来实现Grid组件的数据填充,并集成增删改...

    extjs+servlet的增删改操作,绝对能跑起来!!!

    3. **ExtJS与Servlet交互流程**: - **配置Proxy**:在ExtJS中,设置`Ext.data.Store`的proxy属性为`Ext.data.HttpProxy`,并指定URL以指向Servlet。 - **发送请求**:使用Store的`load()`, `add()`, `update()`, ...

    extjs+servlet实现图片上传

    在本示例中,我们将探讨如何结合ExtJS 3和Servlet技术来实现图片上传功能。 首先,我们需要理解ExtJS的组件体系。在ExtJS中,`FileUploadField`是一个专门用于文件上传的表单字段。通过这个组件,用户可以在浏览器...

    ExtJS4+JSON+Servlet(Struts2)实现登录验证

    总之,“ExtJS4+JSON+Servlet(Struts2)实现登录验证”是一个涵盖了前端交互、数据传输和后端处理的综合实例,对于理解和掌握Web应用开发有极大的帮助。通过深入研究这一主题,开发者可以提升在客户端脚本、数据交换...

    extjs4+servlet+json+soundmanager2实现定时刷新报警(原创)

    5. **数据库文件**:压缩包内的"NetAS_Log.LDF"和"NetAS_Data.MDF"是SQL Server的数据库文件,分别代表日志文件和数据文件。这表明系统可能使用SQL Server存储报警信息。"sys_monitor.sql"可能是创建监控相关表的SQL...

    htmleditor扩展插入图片功能,使用Extjs+servlet请求实现

    在Web开发中,富文本编辑器(HTML Editor)是一个常用工具,它允许用户在网页上进行类似Word的文本编辑操作,包括插入图片、...这一过程涉及了前端交互、后端处理和文件上传等多个技术点,展示了Web开发中的综合运用。

    ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例

    总结来说,这个实例展示了如何将前端的ExtJS4框架,特别是其Accordion布局和Ext.tree.Panel组件,与Servlet和Struts2后端框架集成,利用JSON进行数据交换,来创建一个动态的、交互性强的Web应用。用户可以通过折叠和...

    JSP + Servlet + ExtJS实现CRUD操作

    本项目是关于使用Java服务器页面(JSP)和Servlet技术,结合ExtJS前端框架,实现数据的创建(Create)、读取(Read)、更新(Update)和删除(Delete),也就是常说的CRUD操作。这是一个典型的Web应用程序开发示例,...

    省市县三级连动三种实现方式(javascript+jsp+servlet)、(jquery+jsp+servlet)、(extjs4.0+jsp+servle)

    三种实现方式分别涉及到JavaScript、jQuery和ExtJS4.0这三种前端框架,结合jsp和servlet进行后端处理。 1. **JavaScript+jsp+servlet实现**: 在JavaScript中,可以通过AJAX异步请求后端servlet来获取数据。用户在...

    通过Servlet让Extjs GridPanel 显示数据库数据.docx

    2. **数据库配置**:搭建好数据库环境,并准备好用于测试的数据表和数据记录。 3. **项目搭建**:创建一个新的Java Web项目,并引入必要的Extjs库文件。 #### 三、关键步骤详解 ##### 1. Servlet端数据处理 首先...

    Extjs分页使用java实现数据库数据查询.docx

    前端通过Store、Proxy和Paging Toolbar处理用户交互,后端通过Servlet接收请求,执行数据库操作,并返回符合约定的数据格式。通过这种方式,可以有效地管理和展示大量数据库数据,提供流畅的用户体验。在实际项目中...

    extjs实现增删查改

    总结来说,“extjs实现增删查改”涵盖了前端使用ExtJS组件进行数据操作,以及后端使用servlet、Spring和Hibernate进行数据处理的技术栈。这个过程涉及到了前端交互设计、数据模型管理、HTTP通信和数据库操作等多个...

Global site tag (gtag.js) - Google Analytics