extjs ajax 与servlet 交互的一个事例 - JavaScript当前位置:& &&&extjs ajax 与servlet 交互的一个事例extjs ajax 与servlet 交互的一个事例&&网友分享于：&&浏览：98次extjs ajax 与servlet 交互的一个例子
extjs ajax 与servlet 交互的一个例子==============Servlet================
import java.io.IOE
import javax.servlet.ServletE
import javax.servlet.http.HttpS
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
public class ExtAjaxServlet extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String entityId = request.getParameter("entityId");
System.out.println(entityId);
if(entityId.equals("00001")){
response.getWriter().write("{success:true,msg:'成功'}");
response.getWriter().write("{error:'没有录波文件'}");
response.setStatus(HttpServletResponse.SC_EXPECTATION_FAILED);
//必须设置失败标识，否则前端还会调用success函数
==============js================
Ext.onReady(function(){
Ext.Ajax.request({
url:'extAjax',
params: {entityId: '00002'},
success:function(response){
var respText = Ext.decode(response.responseText); //解码JSON格式数据为一个对象
Ext.Msg.alert('提示', respText.msg);
failure:function(response){
var respText = Ext.decode(response.responseText); //解码JSON格式数据为一个对象
Ext.Msg.alert('错误', respText.error);
站在/blog/452365 肩上
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有extjs&和servlet的交互
MyServlet的代码如下：
package com.
import java.io.IOE
javax.servlet.ServletE
javax.servlet.http.HttpS
javax.servlet.http.HttpServletR
javax.servlet.http.HttpServletR
@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.
import java.io.IOE
import javax.servlet.ServletE
import javax.servlet.http.HttpS
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
@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="/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="/xml/ns/javaee
/xml/ns/javaee/web-app_2_5.xsd"&
&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 =
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
&title&index.html&/title&
&meta http-equiv="content-type" content="text/ 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&
已投稿到：&script type=&text/javascript&&
Ext.onReady(function()
Ext.define('model',{
extend:'Ext.data.Model',
fields:[{name:'id',mapping:'id',type:'int'},
{name:'name',mapping:'name',type:'string'}
var storeSheng = Ext.create(
'Ext.data.Store',
model:'model',
type:'ajax',
url:'city_sheng',
type:'json',
root:'sheng'
autoLoad:true,
remoteSort:true
var storeShi = Ext.create(
'Ext.data.Store',
model:'model',
type:'ajax',
url:'city_shi',
type:'json',
root:'shi'
autoLoad: false,
remoteSort:true
Ext.create('Ext.panel.Panel',{
width:300,
height:200,
renderTo:Ext.getBody(),
xtype:'combo',
name:'sheng',
id:'sheng',
fieldLabel:'sheng',
displayField:'name',
valueField:'id',
store:storeSheng,
triggerAction:'all',
queryMode:'local',
allowBlank:false,
editable:true,
listeners:{
select:function(combo,record,index)
var shi=Ext.getCmp('shi');
shi.clearValue();
shi.store.load({
params:{paramId:combo.getValue()}
}catch(ex)
alert(&数据加载失败！&);
xtype:&combo&,
name:'shi',
fieldLabel:'选择市',
displayField:'name',
valueField:'id',
store:storeShi,
triggerAction:'all',
queryMode:'local'
extjs做界面还是很好的，但是涉及到与后台交互的时候也很麻烦，最近在看extjs，现在把一些写出来。主要是与struts2交互json数据
import java.io.IOE
import java.io.PrintW
import java.util.ArrayL
import java.util.L
import org.apache.struts2.ServletActionC
import model.
import com.opensymphony.xwork2.ActionS
public class cityaction
extends ActionSupport{
private String paramId;
public String getParamId() {
return paramId;
public void setParamId(String paramId) {
this.paramId = paramId;
public List&city& getSheng() {
public void setSheng(List&city& sheng) {
this.sheng =
public List&city& getShi() {
public void setShi(List&city& shi) {
this.shi =
private List&city&
private List&city&
public String sheng()
city c1=new city();
c1.id=100;
c1.name=&beijing&;
city c2=new city();
c2.setId(200);
c2.setName(&shangdong&);
sheng=new ArrayList&city&();
sheng.add(c1);
sheng.add(c2);
return SUCCESS;
public String shi()
if(paramId.equals(&100&))
city c1=new city();
c1.id=1200;
c1.name=&beijing&;
city c2=new city();
c2.setId(2200);
c2.setName(&shangdong&);
shi=new ArrayList&city&();
shi.add(c2);
shi.add(c1);
city c1=new city();
c1.id=1100;
c1.name=&bing&;
city c2=new city();
c2.setId(2100);
c2.setName(&sdong&);
shi=new ArrayList&city&();
shi.add(c1);
shi.add(c2);
return SUCCESS;
struts.xml
&package name=&default&
extends=&json-default&&
&action name=&city_sheng& class=&action.cityaction& method=&sheng&&
&result type=&json& name=&success&&
&action name=&city_shi& class=&action.cityaction& method=&shi&&
&result type=&json& name=&success&&
&/package&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：28353次
排名：千里之外
原创：50篇
(2)(2)(6)(3)(11)(2)(2)(3)(12)(5)(1)(4)}