`
83026191
  • 浏览: 45688 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

extjs和servelt 的简单交互

阅读更多
-Java代码
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);  
    }  
      

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>
-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"));  
                    });  
});

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>
分享到:
评论

相关推荐

    extjs和servlet数据交互的例子

    在IT领域,Web开发是不可或缺的一部分,而ExtJS和Servlet是两种常见的技术,它们在构建交互式用户界面和处理服务器端逻辑方面各自发挥着重要作用。本文将深入探讨一个使用ExtJS与Servlet进行数据交互的实际例子,这...

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

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

    extjs+servlet+json简单应用

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

    ExtJs_servlet_JDBC 做的增删查改

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

    extjs+servlet

    - **Model-View-Controller (MVC)**:ExtJS的MVC模式与Servlet的业务逻辑处理相结合,Model与Servlet交互,View负责显示,Controller处理用户事件。 4. **具体实现步骤** - **创建ExtJS应用**:定义视图组件,...

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

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

    ExtJS+Servlet表单验证和注册

    **ExtJS简介** ExtJS是一款基于...总结来说,这个小例子展示了如何结合ExtJS的前端交互能力和Servlet的后端服务处理能力,构建一个完整的用户注册流程,包括前端的美观界面、表单验证以及后端的数据处理和存储。

    Extjs 与后台交互的实例

    在IT领域,前端框架ExtJS和后端服务的交互是构建Web应用不可或缺的部分。本实例主要探讨了如何利用ExtJS与后台的Java Servlet进行数据的增删改查操作,涉及的技术栈包括ExtJS、Servlet和Java。下面我们将深入讨论...

    extjs+servlet实现图片上传

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

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

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

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

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

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

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

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

    标题 "extjs4 + servlet + json + soundmanager2 实现定时刷新报警" 涉及的是一个基于Web的实时报警系统开发技术,其中包含了多个关键组件和技术。让我们逐一深入探讨这些知识点。 1. **EXTJS4**:EXTJS是一个用...

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

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

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

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

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

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

    JSP + Servlet + ExtJS实现CRUD操作

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

    extjs 前后台交互参数出现中文乱码问题的解决方法

    ### extjs前后台交互参数出现中文乱码问题的解决方法 #### 问题背景与原因分析 在使用MyEclipse开发工具进行Web应用开发时,尤其是采用ExtJS框架结合Ajax技术进行前后端数据交互的过程中,可能会遇到一个常见的...

    搭建EXTJS和STRUTS2框架

    6. **部署与测试**:将项目打包成WAR文件,部署到Servlet容器(如Tomcat)中,然后通过浏览器访问EXTJS的主入口文件,测试前端与后端的交互是否正常。 7. **优化与调试**:根据需求进行性能优化,如缓存策略、数据...

Global site tag (gtag.js) - Google Analytics