Java的Struts2框架配合Ext JS处理JSON数据的使用示例

下面我来详细讲解一下Java的Struts2框架配合Ext JS处理JSON数据的使用示例的完整攻略。

简介

在开发Web应用程序时，常常需要使用JSON（JavaScript对象表示法）来进行数据的传递，而Struts2框架可以帮助我们很好地处理JSON数据。而Ext JS是一款优秀的JavaScript框架，可以让我们轻松地构建富客户端的Web应用程序。那么在处理JSON数据时，Struts2框架和Ext JS的配合使用，可以为我们的Web应用程序带来很多便利。

安装配置

首先，我们需要下载并安装Struts2框架和Ext JS库。在这里，我以Struts2.3.24版本和Ext JS 6.0.0版本为例，介绍如何配置这两个库。

Struts2框架

首先，我们需要下载Struts2框架，可以从官网（http://struts.apache.org/）下载，或使用Maven等构建工具进行下载。下载完成后，我们需要将其部署到Web容器中。如果你使用的是Tomcat容器，只需要将struts2-core-xxx.jar和其它相关的jar文件复制到WEB-INF/lib目录下即可。

Ext JS库

下载完Ext JS库后，我们需要将其添加到Web应用程序中。可以通过以下方式添加：

将Ext JS库文件复制到Web应用程序文件夹中，如WebRoot/extjs文件夹下；
在html文件中引入Ext JS库文件。

以上两种方式中，第二种方式更为简便，只需在html文件中添加如下代码即可：

<link rel="stylesheet" href="extjs/classic/theme-classic/resources/theme-classic-all.css">
<script src="extjs/ext-all.js"></script>

其中，theme-classic-all.css是Ext JS的主题文件，ext-all.js是主要的库文件。

示例1：使用Struts2框架和Ext JS获取JSON数据并解析

首先，我们需要在Struts2框架中编写一个Action类，用于返回JSON数据，代码如下：

public class JsonAction extends ActionSupport {
    private Map<String, String> data;

    @Override
    public String execute() {
        data = new HashMap<String, String>();
        data.put("name", "张三");
        data.put("age", "20");
        data.put("gender", "男");
        return SUCCESS;
    }

    public Map<String, String> getData() {
        return data;
    }

    public void setData(Map<String, String> data) {
        this.data = data;
    }
}

在该Action类中，我们定义了一个Map类型的变量data，用于存放要返回的JSON数据。在execute方法中，我们将要返回的JSON数据存放到data变量中，并返回SUCCESS。

接下来，我们在JSP页面中使用Ext JS框架来获取该JSON数据。代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ext JS获取JSON数据示例</title>
    <link rel="stylesheet" href="extjs/classic/theme-classic/resources/theme-classic-all.css">
    <script src="extjs/ext-all.js"></script>
    <script>
        Ext.onReady(function(){
            Ext.Ajax.request({
                url: 'json.action',
                success: function(response, opts) {
                    var obj = Ext.decode(response.responseText);
                    console.dir(obj);
                },
                failure: function(response, opts) {
                    console.log('server-side failure with status code ' + response.status);
                }
            });
        });
    </script>
</head>
<body></body>
</html>

在该页面中，我们使用Ext JS框架中的Ajax类，来向后端服务器发送请求，并获得返回的JSON数据。其中，url参数为要请求的Action类的名称，即我们上面定义的JsonAction类的名称；success和failure分别为请求成功和请求失败后执行的函数。在success函数中，我们将返回的JSON数据解析成对象，并将其输出到浏览器的开发者工具的console中，方便调试。我们可以在控制台看到输出的内容信息：

Object {name: "张三", age: "20", gender: "男"}

示例2：使用Struts2框架和Ext JS将表单数据转化成JSON数据并提交

假设我们有一个表单，包含姓名、年龄、性别等字段，我们希望使用Ext JS将表单数据转化成JSON数据，并提交到后端服务器中。做法如下：

首先，我们需要在JSP页面中定义前端表单，并使用Ext JS框架监听表单的提交事件，将表单数据转化成JSON格式并提交到后端服务器。代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ext JS将表单数据转化成JSON数据并提交示例</title>
    <link rel="stylesheet" href="extjs/classic/theme-classic/resources/theme-classic-all.css">
    <script src="extjs/ext-all.js"></script>
    <script>
        Ext.onReady(function(){
            Ext.create('Ext.form.Panel', {
                title: '用户信息',
                renderTo: Ext.getBody(),
                width: 300,
                items: [{
                    xtype: 'textfield',
                    fieldLabel: '姓名',
                    name: 'name'
                }, {
                    xtype: 'textfield',
                    fieldLabel: '年龄',
                    name: 'age'
                }, {
                    xtype: 'radiogroup',
                    fieldLabel: '性别',
                    items: [{
                        boxLabel: '男',
                        name: 'gender',
                        inputValue: '男'
                    }, {
                        boxLabel: '女',
                        name: 'gender',
                        inputValue: '女'
                    }]
                }],
                buttons: [{
                    text: '提交',
                    handler: function() {
                        var form = this.up('form').getForm();
                        if (form.isValid()) {
                            var values = form.getValues();
                            var jsonData = Ext.JSON.encode(values);
                            Ext.Ajax.request({
                                url: 'jsonSubmit.action',
                                method: 'POST',
                                params: jsonData,
                                success: function(response, opts) {
                                    console.log(response.responseText);
                                },
                                failure: function(response, opts) {
                                    console.log('server-side failure with status code ' + response.status);
                                }
                            });
                        }
                    }
                }]
            });
        });
    </script>
</head>
<body></body>
</html>

在该页面中，我们首先定义了一个form.Panel类型的表单，并定义了三个字段：姓名、年龄、性别。随后，我们在监听表单的提交事件处理函数中，首先通过form.getValues()方法获取表单中填写的数据，并将其转化成JSON数据格式；然后，我们使用Ext.Ajax.request()方法将JSON数据提交到后端服务器中。

在后端服务器中，我们需要编写一个Action类，用于处理该JSON数据。代码如下：

public class JsonSubmitAction extends ActionSupport {
    private String data;

    @Override
    public String execute() throws Exception {
        System.out.println(data);
        return SUCCESS;
    }

    public String getData() {
        return data;
    }

    public void setData(String data) {
        this.data = data;
    }
}

在该Action类中，我们定义了一个data变量，用于接收前端传过来的JSON数据。在execute()方法中，我们将该JSON数据输出到控制台中。

综上所述，使用Struts2框架和Ext JS处理JSON数据，可以很好地帮助我们完成前后端数据交互的过程，提高Web应用程序的开发效率。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Java的Struts2框架配合Ext JS处理JSON数据的使用示例 - Python技术站