使用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进行处理
本文通过一个具体的例子来介绍如何使用Ext2.0框架中的Ajax对象与ArcIMS服务器进行交互,实现向服务器发送请求并处理返回的数据。 #### 二、核心概念简介 1. **Ext2.0**:一个开源的JavaScript库,用于构建交互式的...
3. **Ajax请求**:使用`Ext.Ajax.request`方法发起异步请求,该方法支持POST或GET方式提交数据。在`action.js`中,可以配置请求的URL(如`action.html`),数据类型,以及成功或失败的回调函数。 4. **服务器端处理...
本示例探讨如何利用Ext JS中的`Ext.form.field.ComboBox`组件,结合Java后端和JSON数据格式,来创建这样一个功能。 `Ext.form.field.ComboBox`是Ext JS框架中一个强大的组件,它提供了下拉列表的功能,可以用于创建...
例如,通过`Ext.Ajax.request`方法设置URL、请求方法(GET或POST)、回调函数等。 2. **Servlet响应处理**:在Servlet端,我们需要处理来自前端的请求,可能涉及数据库操作,然后返回JSON格式的数据。JSON易于解析...
在本文中,我们将深入探讨如何使用EXT框架与Java Servlet技术构建一个简单的登录示例。EXT是一个强大的JavaScript前端框架,主要用于创建交互式、响应式的Web应用。而Java Servlet是后端服务器端的技术,用于处理...
EXT3.0提供了Ajax请求的方法,如`Ext.Ajax.request`,我们可以利用它向服务器发送POST请求,携带文件数据。同时,需要在服务器端(JSP)配置接收并处理这些上传文件的逻辑。例如: ```javascript Ext.onReady...
例如,你可以创建一个EXT的按钮,关联一个事件处理器,处理器中调用`Ext.Ajax.request`并指定URL、方法、参数等。 总结来说,"ext导出excel"的过程主要包括以下步骤: 1. 在JSP页面上创建EXT组件,如Grid或Panel,...
EXT JS提供了AJAX请求的简便方法,如Ext.Ajax.request,使得与getdata.jsp的交互变得简单。 在JSP中,开发者可以利用内置的Java Servlet API,如HttpServletRequest和HttpServletResponse对象,来处理请求和响应。...
在ExtJS中,我们可以使用`Ext.Ajax.request`方法: ```javascript Ext.Ajax.request({ url: 'uploadImage', // Servlet地址 method: 'POST', params: { // 可以用FormData封装图片数据 file: Ext.getCmp('...
总结起来,这个EXTJS登录示例展示了如何使用EXTJS创建用户界面,处理用户输入,进行前端验证,并通过AJAX与服务器进行通信。同时,也涉及到后台Servlet的配置,用于处理前端发送的登录请求。这些知识点对于理解EXTJS...
通过上述方法,我们可以有效地解决在使用ExtJS进行Ajax同步请求时,中文参数出现乱码的问题。关键是保证前后端编码的一致性,以及正确地使用编码与解码函数。此外,还可以考虑在服务器端配置文件中设置统一的字符集...
在现代的JavaWeb开发中,MVC(Model-View-Controller)框架...在实际项目中,开发者可能会结合使用jQuery、Ext、Prototype或DWR等JavaScript库,以简化Ajax操作,并利用它们提供的额外功能,如错误处理、缓存控制等。
在IT行业中,Web开发是一项核心任务,而ExtJS和Servlet是两种常见的技术工具,用于构建交互性强、功能丰富的用户界面和后端数据处理。本文将详细介绍如何利用ExtJS4和Servlet来实现Grid组件的数据填充,并集成增删改...
在实际开发中,为了提高代码的可维护性和安全性,通常会使用更现代的方法来解析JSON,例如使用`JSON.parse()`而不是`eval`,并且在处理服务器响应时,应当对可能出现的错误进行充分的异常处理。此外,数据交互过程中...
使用`Ext.Ajax.request`或EXT Direct,后台可以通过Servlet监听特定的URL来接收和处理上传请求。同时,前端可以通过回调函数来更新UI,显示上传进度或错误信息。 在提供的压缩包`upl`中,可能包含了以下文件: 1. ...
在ExtJS应用中,我们可以使用`Ext.Ajax.request`方法发送AJAX请求,将JSON数据作为请求参数。以下是一个示例,展示了如何向服务器发送POST请求,并接收JSON响应: ```javascript Ext.Ajax.request({ url: '...
1. Ext框架:作为流行的AJAX框架之一,Ext在处理中文字符时可能会出现编码问题。 2. Struts:在接收和展示数据时可能出现乱码。 3. Hibernate:在执行包含中文的HQL查询时,例如`from Test t where t.name like '%...
3. **Ajax Upload**: EXTJS的Ajax请求(`Ext.Ajax.request`)可以用来发送文件到服务器进行异步上传。通过监听`change`事件,当用户选择文件后,我们可以获取到文件信息,并使用Ajax发起POST请求,将文件数据发送到...