ext與servlet的交互

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

}

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 >

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

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 >