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
分享到:
相关推荐
ExtJS是一个JavaScript框架,用于创建富客户端应用,它提供了丰富的组件和数据管理工具。在提供的 `myserlvet.js` 文件中,我们创建了一个 `JsonStore` 对象,它是ExtJS中用来存储和管理JSON数据的类。`JsonStore` ...
总结来说,"extjs+servlet+json简单应用"是利用ExtJS构建前端界面,通过Ajax与Servlet进行通信,Servlet处理业务逻辑并返回JSON数据,再由ExtJS解析并展示。这种方式让前后端职责明确,提高了代码的可维护性和扩展性...
总的来说,这个例子是学习ExtJS与Servlet集成的一个良好起点,涵盖了前端展示、后端处理和数据库交互的基本流程。通过实践这个例子,开发者可以深入理解这两者如何协同工作,为构建更复杂的Web应用打下坚实基础。
它提供了丰富的用户界面组件和数据管理功能。Servlet,则是Java平台上的一个标准,用于处理和生成HTTP请求,通常作为服务器端的程序接口。在"extjs + servlet"的整合中,ExtJS负责前端展示和交互,而Servlet则负责...
ExtJs、Servlet和JDBC是Web开发中的三个关键组件,它们在构建动态、交互式的Web应用程序时发挥着重要作用。下面将详细阐述这三个技术及其在"增删查改"(CRUD)操作中的应用。 首先,ExtJs是一个强大的JavaScript库...
通过HttpServletResponse对象设置响应内容,如状态码、响应头和数据。 3. **会话管理** Servlet可以管理HTTP会话,通过HttpSession接口创建和跟踪用户会话,存储和检索会话级数据。 4. **注册和部署** Servlet...
在IT领域,Web应用开发是不可或缺的一部分,而ExtJs、Java和Servlet的组合常常用于构建交互性强、功能丰富的前端和后端系统。本篇将详细探讨如何利用这些技术实现数据库的增删查改(CRUD)操作以及分页功能。 首先...
在这个实例中,Model代表用户数据,View是用户界面,Controller处理用户交互和数据更新。Servlet则扮演了控制器的角色,协调数据库和前端的交互。 6. **安全和性能优化**:在实际应用中,我们还需要考虑安全性,...
在IT行业中,Web开发是一项核心任务,而ExtJS和Servlet是两种常见的技术工具,用于构建交互性强、功能丰富的用户界面和后端数据处理。本文将详细介绍如何利用ExtJS4和Servlet来实现Grid组件的数据填充,并集成增删改...
3. **ExtJS与Servlet交互流程**: - **配置Proxy**:在ExtJS中,设置`Ext.data.Store`的proxy属性为`Ext.data.HttpProxy`,并指定URL以指向Servlet。 - **发送请求**:使用Store的`load()`, `add()`, `update()`, ...
在本示例中,我们将探讨如何结合ExtJS 3和Servlet技术来实现图片上传功能。 首先,我们需要理解ExtJS的组件体系。在ExtJS中,`FileUploadField`是一个专门用于文件上传的表单字段。通过这个组件,用户可以在浏览器...
总之,“ExtJS4+JSON+Servlet(Struts2)实现登录验证”是一个涵盖了前端交互、数据传输和后端处理的综合实例,对于理解和掌握Web应用开发有极大的帮助。通过深入研究这一主题,开发者可以提升在客户端脚本、数据交换...
5. **数据库文件**:压缩包内的"NetAS_Log.LDF"和"NetAS_Data.MDF"是SQL Server的数据库文件,分别代表日志文件和数据文件。这表明系统可能使用SQL Server存储报警信息。"sys_monitor.sql"可能是创建监控相关表的SQL...
在Web开发中,富文本编辑器(HTML Editor)是一个常用工具,它允许用户在网页上进行类似Word的文本编辑操作,包括插入图片、...这一过程涉及了前端交互、后端处理和文件上传等多个技术点,展示了Web开发中的综合运用。
总结来说,这个实例展示了如何将前端的ExtJS4框架,特别是其Accordion布局和Ext.tree.Panel组件,与Servlet和Struts2后端框架集成,利用JSON进行数据交换,来创建一个动态的、交互性强的Web应用。用户可以通过折叠和...
本项目是关于使用Java服务器页面(JSP)和Servlet技术,结合ExtJS前端框架,实现数据的创建(Create)、读取(Read)、更新(Update)和删除(Delete),也就是常说的CRUD操作。这是一个典型的Web应用程序开发示例,...
三种实现方式分别涉及到JavaScript、jQuery和ExtJS4.0这三种前端框架,结合jsp和servlet进行后端处理。 1. **JavaScript+jsp+servlet实现**: 在JavaScript中,可以通过AJAX异步请求后端servlet来获取数据。用户在...
2. **数据库配置**:搭建好数据库环境,并准备好用于测试的数据表和数据记录。 3. **项目搭建**:创建一个新的Java Web项目,并引入必要的Extjs库文件。 #### 三、关键步骤详解 ##### 1. Servlet端数据处理 首先...
前端通过Store、Proxy和Paging Toolbar处理用户交互,后端通过Servlet接收请求,执行数据库操作,并返回符合约定的数据格式。通过这种方式,可以有效地管理和展示大量数据库数据,提供流畅的用户体验。在实际项目中...
总结来说,“extjs实现增删查改”涵盖了前端使用ExtJS组件进行数据操作,以及后端使用servlet、Spring和Hibernate进行数据处理的技术栈。这个过程涉及到了前端交互设计、数据模型管理、HTTP通信和数据库操作等多个...