[ExtJS5学习笔记]第三十二节 sencha extjs 5与struts2的ajax交互配置

简介:

本文作者:sushengmiyan

------------------------------------------------------------------------------------------------------------------------------------


sencha extjs 5 增加一个struts2的配置,这样可以在设置好前台布局之后,与后台交互获取数据显示。现在有一个问题是struts2对于url的跳转action支持比较良好,但是对于像Extjs这样,ajax请求的,无url跳转的实现,还是需要一点点技巧的。本文实例讲解一个Ext.Ajax.request的请求实例,返回后台处理之后的结果。


步骤一:创建struts2的配置文件struts.xml

<?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE struts PUBLIC  
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
    "http://struts.apache.org/dtds/struts-2.0.dtd">  
   
<struts>  
   
    <constant name="struts.devMode" value="true" />  
   
    <package name="basicstruts2" extends="struts-default">  
   
        <action name="index">  
            <result>/index.jsp</result>  
        </action>  
   
    </package>  
   
</struts> 

这个文件需要放置在src目录下,可以在下载的struts2中的webapp下找一个文件来直接使用,不需要自己一行代码一行代码的去敲,毕竟我们会使用就可以了。


步骤二:对web.xml修改,增加struts2的支持

<filter>  
  <filter-name>struts2</filter-name>  
  <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>  
</filter>  
   
<filter-mapping>  
  <filter-name>struts2</filter-name>  
   <url-pattern>/*</url-pattern>  
</filter-mapping>  
这表示struts2会接管所有的请求,这样我们前台的请求都会纳入struts2的支持了


步骤三:增加struts2核心jar包以及struts2依赖的jar包

需要的jar包邮以下几个: 

1.commons-fileupload-1.3.1.jar

2.commons-io-2.2.jar

3.commons-lang3-3.2.jar

4.freemarker-2.3.19.jar

5.javassist-3.11.0-GA.jar

6.ognl-3.0.6.jar

7.struts2-core-2.3.20.jar

8.xwork-core-2.3.20.jar

这8个jar包都可以在struts2的lib包里面找到,拷贝到项目lib目录下就可以了,依赖的jar包之前有专门罗列过,参照:

http://blog.csdn.net/sushengmiyan/article/details/43272061


到此为止,我们的项目就配置成功了struts2,怎么去验证成功与否呢?我们使用extjs写一个ajax的request

步骤四:书写前台ajax请求

		Ext.Ajax.request({
			url: 'foo',
			async: false,
			success: function(response) {
				debugger;
				var data = Ext.decode(response.responseText);
                                console.log(data);

			}
		});
这里使用Ext.Ajax.request发送请求,指定了url为foo这个url就对应着struts2的一个action连接。我这里不太喜欢配置xml文件,而是喜欢使用struts2的注解的方式来实现跳转,所以下一步,增加一个注解插件

步骤五 增加struts2的注解插件

jar包增加struts2-convention-plugin-2.3.20.jar

步骤六:熟悉后台实现代码

在src目录下增加自己的实现类

我这里新建了一个包com.oasystem.action

新增一个类TestAction

package com.oasystem.action;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Result;

import com.opensymphony.xwork2.ActionSupport;

public class TestAction extends ActionSupport {

	private static final long serialVersionUID = 5316344216452587235L;
	private String _dc;
	//这里就是使用注解指定struts2 action调用的地方
	@Action(value = "/foo")
	//方法设置成了void 不需要返回数据之间将数据写回到response中了
	public void foo() {
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("utf-8");
                String abc = "{'a':'测试'}";

                try {
			response.getWriter().write(abc);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	};	
	
	public String get_dc()
	{
	  return this._dc;
	};
	
	public void set_dc(String dc)
	{
	   this._dc = dc;
	};

}


OK测试一下,启动tomcat服务器,执行这个ajax请求:


命令行输出内容:


OK到现在,就已经成功将struts2与sencha extjs实现了关联。所有的后台都可以由struts2来接管了。

相关文章
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
246 0
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
312 2
|
XML 前端开发 JavaScript
使用 AJAX 提升网页数据的动态交互
使用 AJAX 提升网页数据的动态交互
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
193 22
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
308 3
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
296 1
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
250 4
|
前端开发 API 开发者
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
170 3
|
XML 存储 前端开发
后端程序员的前后端交互核心-Ajax
后端程序员的前后端交互核心-Ajax
168 6
后端程序员的前后端交互核心-Ajax