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

Ext Ajax:如何调用Ext.Ajax.request方法和使用Java Servlet进行处理

    博客分类:
  • java
阅读更多
使用Ext.Ajax.request提交数据的代码如下(这段代码在一个Js文件中,为避免中文乱码,js文件必须是utf-8编码):

Javascript代码
<script type="text/javascript">  
Ext.Ajax.request({  
    url:'http://localhost:8080/myapp/ExtHandler',//请求URL(JSP/Servlet)  
    jsonData:Ext.util.JSON.encode(info),//JSON格式的参数,你还可以利用下面的params传其它参数  
    params:{action:'up'},//设置传递参数  
    success: function(resp,opts) {//成功后的回调方法  
        var respText = Ext.util.JSON.decode(resp.responseText); //解码JSON格式数据为一个对象  
        Ext.Msg.alert('提示', respText.info);  
    },  
 
    failure: function(resp,opts) {//失败  
            var respText = Ext.util.JSON.decode(resp.responseText);  
            Ext.Msg.alert('错误', respText.error);  
    }  
 
   });  
 
</script> 

<script type="text/javascript">
Ext.Ajax.request({
url:'http://localhost:8080/myapp/ExtHandler',//请求URL(JSP/Servlet)
jsonData:Ext.util.JSON.encode(info),//JSON格式的参数,你还可以利用下面的params传其它参数
params:{action:'up'},//设置传递参数
success: function(resp,opts) {//成功后的回调方法
var respText = Ext.util.JSON.decode(resp.responseText); //解码JSON格式数据为一个对象
Ext.Msg.alert('提示', respText.info);
},

failure: function(resp,opts) {//失败
var respText = Ext.util.JSON.decode(resp.responseText);
Ext.Msg.alert('错误', respText.error);
}

   });

</script>
1、url:参数指定的是一个Java Servlet,
2、jsonData:参数提交JSON格式的数据到Servlet处理,你也可以提交其它参数,
3、params参数中定义;
4、success:然后根据服务器的处理结果Ext.Ajax调用相应成功或失败的回调函数进行处理;

在Servlet中如何得到jsonData参数中定义的数据呢?看以下代码:

Java代码
StringBuffer json = new StringBuffer();    
 
String line = null;      
 
try {       
 
    BufferedReader reader = req.getReader();      
 
    while ((line = reader.readLine()) != null)  {  
 
            //读取jsonData中定义的数据    
 
          json.append(line);      
 
    }  
 
} catch (Exception e) {      
 
}    

StringBuffer json = new StringBuffer(); 

String line = null;   

try {    

    BufferedReader reader = req.getReader();   

    while ((line = reader.readLine()) != null)  {

            //读取jsonData中定义的数据 

          json.append(line);   

    }

} catch (Exception e) {   

}  


服务端处理数据成功,设置返回信息:

Java代码
//success回调函数将调用执行,输出respText.info信息  
 
rsp.setContentType("text/json; charset=utf-8");  
 
rsp.getWriter().write(  
        "{success:true,info:'更新信息成功'}");  

//success回调函数将调用执行,输出respText.info信息

rsp.setContentType("text/json; charset=utf-8");

rsp.getWriter().write(
        "{success:true,info:'更新信息成功'}");


服务器端处理数据失败,设置返回信息:

Java代码
rsp.setContentType("text/json; charset=utf-8");  
 
rsp.getWriter().write(  
    "{success:false,error:'更新信息失败,原因为:" + err + "'}");  
rsp.setStatus(HttpServletResponse.SC_EXPECTATION_FAILED);     //设置失败标识  
 
//failure回调函数将调用执行,输出respText.error信息 

rsp.setContentType("text/json; charset=utf-8");

rsp.getWriter().write(
    "{success:false,error:'更新信息失败,原因为:" + err + "'}");
rsp.setStatus(HttpServletResponse.SC_EXPECTATION_FAILED);     //设置失败标识

//failure回调函数将调用执行,输出respText.error信息


Sample2:
Java代码
<script type="text/javascript">  
    Ext.onReady(function(){  
        Ext.Msg.confirm("record!","OYE",function(btn){  
            if(btn=="yes"){  
                var rs = new Ext.data.Record({id:"1",name:"aaa"});  
                Ext.Ajax.request({  
                    params:rs.data,  
                    url:"rs.jsp",  
                    method:"post",  
                    success:function(resp){  
                        var res = resp.responseText;  
                        Ext.Msg.alert("attention","Success! \""+res+"\"");  
                    },  
                    failure:function(){  
                        Ext.Msg.alert("attention","Failure!");  
                    }  
                });  
            }  
        });  
    });  
</script> 

<script type="text/javascript">
Ext.onReady(function(){
Ext.Msg.confirm("record!","OYE",function(btn){
if(btn=="yes"){
var rs = new Ext.data.Record({id:"1",name:"aaa"});
Ext.Ajax.request({
params:rs.data,
url:"rs.jsp",
method:"post",
success:function(resp){
var res = resp.responseText;
Ext.Msg.alert("attention","Success! \""+res+"\"");
},
failure:function(){
Ext.Msg.alert("attention","Failure!");
}
});
}
});
});
</script>


html代码:
Html代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
<html><head><title>TITLE</title></head><body> 
<%  
String id = request.getParameter("id");  
String name = request.getParameter("name");  
out.println("id = "+id+" and name = "+name);  
String date = new Date().toString();  
out.print(date);  
%> 
 
</body></html> 
分享到:
评论

相关推荐

    Ext Ajax:如何调用Ext.Ajax.request方法和使用Java Servlet进行处理.doc

    Ext Ajax:如何调用Ext.Ajax.request方法和使用Java Servlet进行处理

    使用Ext2.0的Ajax连接ArcIMS例子

    本文通过一个具体的例子来介绍如何使用Ext2.0框架中的Ajax对象与ArcIMS服务器进行交互,实现向服务器发送请求并处理返回的数据。 #### 二、核心概念简介 1. **Ext2.0**:一个开源的JavaScript库,用于构建交互式的...

    Ext+JSP实现数据提交

    3. **Ajax请求**:使用`Ext.Ajax.request`方法发起异步请求,该方法支持POST或GET方式提交数据。在`action.js`中,可以配置请求的URL(如`action.html`),数据类型,以及成功或失败的回调函数。 4. **服务器端处理...

    Ext.form.field.ComboBox结合Java、JSON实现AutoComplete

    本示例探讨如何利用Ext JS中的`Ext.form.field.ComboBox`组件,结合Java后端和JSON数据格式,来创建这样一个功能。 `Ext.form.field.ComboBox`是Ext JS框架中一个强大的组件,它提供了下拉列表的功能,可以用于创建...

    Ext项目实例 js sevlet

    例如,通过`Ext.Ajax.request`方法设置URL、请求方法(GET或POST)、回调函数等。 2. **Servlet响应处理**:在Servlet端,我们需要处理来自前端的请求,可能涉及数据库操作,然后返回JSON格式的数据。JSON易于解析...

    Ext一个登陆的小例子 (java+servlet)

    在本文中,我们将深入探讨如何使用EXT框架与Java Servlet技术构建一个简单的登录示例。EXT是一个强大的JavaScript前端框架,主要用于创建交互式、响应式的Web应用。而Java Servlet是后端服务器端的技术,用于处理...

    EXT3.0 JSP上传

    EXT3.0提供了Ajax请求的方法,如`Ext.Ajax.request`,我们可以利用它向服务器发送POST请求,携带文件数据。同时,需要在服务器端(JSP)配置接收并处理这些上传文件的逻辑。例如: ```javascript Ext.onReady...

    ext导出excel

    例如,你可以创建一个EXT的按钮,关联一个事件处理器,处理器中调用`Ext.Ajax.request`并指定URL、方法、参数等。 总结来说,"ext导出excel"的过程主要包括以下步骤: 1. 在JSP页面上创建EXT组件,如Grid或Panel,...

    ext+jsp实现登入.rar

    EXT JS提供了AJAX请求的简便方法,如Ext.Ajax.request,使得与getdata.jsp的交互变得简单。 在JSP中,开发者可以利用内置的Java Servlet API,如HttpServletRequest和HttpServletResponse对象,来处理请求和响应。...

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

    在ExtJS中,我们可以使用`Ext.Ajax.request`方法: ```javascript Ext.Ajax.request({ url: 'uploadImage', // Servlet地址 method: 'POST', params: { // 可以用FormData封装图片数据 file: Ext.getCmp('...

    extjs登录.pdf

    总结起来,这个EXTJS登录示例展示了如何使用EXTJS创建用户界面,处理用户输入,进行前端验证,并通过AJAX与服务器进行通信。同时,也涉及到后台Servlet的配置,用于处理前端发送的登录请求。这些知识点对于理解EXTJS...

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

    通过上述方法,我们可以有效地解决在使用ExtJS进行Ajax同步请求时,中文参数出现乱码的问题。关键是保证前后端编码的一致性,以及正确地使用编码与解码函数。此外,还可以考虑在服务器端配置文件中设置统一的字符集...

    探讨Ajax获取表单值向Servlet传递的设计方案.doc

    在现代的JavaWeb开发中,MVC(Model-View-Controller)框架...在实际项目中,开发者可能会结合使用jQuery、Ext、Prototype或DWR等JavaScript库,以简化Ajax操作,并利用它们提供的额外功能,如错误处理、缓存控制等。

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

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

    ext前台接收action传过来的json数据示例_.docx

    在实际开发中,为了提高代码的可维护性和安全性,通常会使用更现代的方法来解析JSON,例如使用`JSON.parse()`而不是`eval`,并且在处理服务器响应时,应当对可能出现的错误进行充分的异常处理。此外,数据交互过程中...

    java实现文件批量上传

    使用`Ext.Ajax.request`或EXT Direct,后台可以通过Servlet监听特定的URL来接收和处理上传请求。同时,前端可以通过回调函数来更新UI,显示上传进度或错误信息。 在提供的压缩包`upl`中,可能包含了以下文件: 1. ...

    spring mvc +Extjs

    在ExtJS应用中,我们可以使用`Ext.Ajax.request`方法发送AJAX请求,将JSON数据作为请求参数。以下是一个示例,展示了如何向服务器发送POST请求,并接收JSON响应: ```javascript Ext.Ajax.request({ url: '...

    解决J2EE开发中乱码问题

    1. Ext框架:作为流行的AJAX框架之一,Ext在处理中文字符时可能会出现编码问题。 2. Struts:在接收和展示数据时可能出现乱码。 3. Hibernate:在执行包含中文的HQL查询时,例如`from Test t where t.name like '%...

    extjs批量上传的所有相关代码和jar,支持包和笔记

    3. **Ajax Upload**: EXTJS的Ajax请求(`Ext.Ajax.request`)可以用来发送文件到服务器进行异步上传。通过监听`change`事件,当用户选择文件后,我们可以获取到文件信息,并使用Ajax发起POST请求,将文件数据发送到...

Global site tag (gtag.js) - Google Analytics