ext 和 servlet交互 .

.界面输出后台数据：
servlet代码:

Java代码  

1. package com.test;     
2.      
3. import java.io.IOException;     
4.      
5. import javax.servlet.ServletException;     
6. import javax.servlet.http.HttpServlet;     
7. import javax.servlet.http.HttpServletRequest;     
8. import javax.servlet.http.HttpServletResponse;     
9.      
10. @SuppressWarnings("serial")     
11. public class MyServlet extends HttpServlet {     
12.      
13.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {     
14.         // TODO Auto-generated method stub     
15.         response.setContentType("text/html");     
16.         response.setCharacterEncoding("UTF-8");     
17.         String _str = "[{name:'唐伯虎',age:25,sex:'男'},{name:'楚留香',age:24,sex:'女'}]";     
18.         response.getWriter().print(_str);     
19.     }     
20.          
21. }    

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:

Java代码  

1. <?xml version="1.0" encoding="UTF-8"?>     
2. <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"     
3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"     
4.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee      
5.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">     
6.      
7.     <servlet>     
8.         <servlet-name>myservlet</servlet-name>     
9.         <servlet-class>com.test.MyServlet</servlet-class>     
10.     </servlet>     
11.     <servlet-mapping>     
12.         <servlet-name>myservlet</servlet-name>     
13.         <url-pattern>/myservlet</url-pattern>     
14.     </servlet-mapping>     
15.     <welcome-file-list>     
16.         <welcome-file>index.jsp</welcome-file>     
17.     </welcome-file-list>     
18. </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:

Java代码  

1. Ext.onReady(function() {     
2.             var _store = new Ext.data.JsonStore({     
3.                         url : "http://localhost:8080/zz/myservlet",     
4.                         fields : ["name", "age", "sex"]     
5.                     });     
6.             _store.load();     
7.             _store.on("load", function() {     
8.                         alert(_store.getCount());     
9.                         alert(Ext.util.JSON.encode(_store.getAt(1).data));     
10.                         alert(_store.getAt(0).get("name"));     
11.                     });     
12. });    

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:

Java代码  

1. <html>     
2.     <head>     
3.         <title>index.html</title>     
4.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">     
5.         <link rel="stylesheet" type="text/css"     
6.             href="../extjs/resources/css/ext-all.css">     
7.         <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>     
8.         <script type="text/javascript" src="../extjs/ext-core.js"></script>     
9.         <script type="text/javascript" src="../extjs/ext-all.js"></script>     
10.         <script type="text/javascript" src="../js/myservlet.js"></script>     
11.     </head>     
12.     <body>     
13.     </body>     
14. </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>

2.给服务器发送数据：

Java代码  

1. function sFn(){   
2. alert('保存成功');   
3. }   
4. function fFn(){   
5. alert('保存失败');   
6. }   
7. Ext.Ajax.request({   
8. url: 'student.ejf?cmd=save’   
9. success: sFn   
10. failure: fFn,   
11. params: { name: '小李',email: ' xiaoli@easyjf.com',bornDate: ' 1992-5-6',sex: '男'}   
12. });  

function sFn(){
alert('保存成功');
}
function fFn(){
alert('保存失败');
}
Ext.Ajax.request({
url: 'student.ejf?cmd=save’
success: sFn
failure: fFn,
params: { name: '小李',email: ' xiaoli@easyjf.com',bornDate: ' 1992-5-6',sex: '男'}
});

parmas是一个json对象，譬如params:{name:'张三',age:19}
那么你在后台用request.getParameter("name")就是张三
用request.getParameter("age")就是19