您的位置：首页 > 产品设计 > UI/UE

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

2014-06-12 09:45 836 查看
使用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>

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) {

}

服务端处理数据成功，设置返回信息：

Java代码



//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信息

折腾了一晚上，也没弄明白为什么把success置了false,还是不执行failure,或者把failure置为true,也还是不执行。

早上到晚上一看，原来ajax中的success或是failure和那个没关系，只要执行中response返回的status为200，都是会执行success里面的函数的，

只有通过下面代码设置status状态后，才会执行failure

//response.setStatus(500);

Ext.form.Action.Submit的配置选项success、failure是根据返回json中success属性判断的，如果success为true，则success，false则failure，如果无json中无success属性，failure，故要提示操作是否成功，必须要返回success属性。

Ext.Ajax.request的配置选项
success、failure是
根据response的status属性，即状态码决定的，200则为success，404或500等则为failure。


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>

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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航