struts2中使用ajax

最新推荐文章于 2021-08-05 15:13:54 发布

夢回起點

最新推荐文章于 2021-08-05 15:13:54 发布

阅读量348

点赞数

CC 4.0 BY-SA版权

文章标签： ajax struts2.0 json

本文链接：https://blog.youkuaiyun.com/humian151/article/details/54407185

本文介绍如何在Struts2框架中使用JSON插件处理Ajax请求，包括配置依赖、编写Action类及前端页面交互代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里采取接收对象为json类型，我们先在pom.xml里面引入相关依赖

 <dependency>
      <groupId>org.apache.struts</groupId>
      <artifactId>struts2-json-plugin</artifactId>
      <version>2.3.24.1</version>
    </dependency>

如果你要搭建完整的项目，请参考我之前的一篇博客
spring4+hibernate4+struts2整合

编写一个action类，注意struts2里面的action需要继承ActionSupport

public class JsonAction extends ActionSupport{
    private  String name;
    private String password;
    private String result;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getResult() {
        return result;
    }

    public void setResult(String result) {
        this.result = result;
    }

    @Override
    public String execute() throws Exception {
        System.out.println("确认下是不是进来了------"+name);
        result = "登陆成功！";
        return SUCCESS;
    }
}

由于这个只是简单的测试ajax能否调用到struts2里面的方法，所以这里不加逻辑判断了，只简单的返回。

在struts.xml里面新建一个package继承json-default,这部很重要，否则你写入struts-default 的话，启动会报

Caused by: There is no result type defined for type 'json' mapped with name 'success'.  Did you mean 'json'? - result - file:/D:/IdeaProjects/hibernatewebdemo/target/hibernate-web-demo/WEB-INF/classes/struts.xml:25:33
    at com.opensymphony.xwork2.config.providers.XmlConfigurationProvider.buildResults(XmlConfigurationProvider.java:725)
    at com.opensymphony.xwork2.config.providers.XmlConfigurationProvider.addAction(XmlConfigurationProvider.java:439)
    ... 60 more

 <package name="ajax" extends="json-default">
        <action name="jsonAction" class="com.zwq.web.JsonAction">
            <result type="json"></result>
        </action>
    </package>

前段jsp页面设计

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

</head>
<body>
    <div class="container">
        <div class="panel panel-info">
            <div class="panel-heading">
                <form class="form-horizontal" role="form" id="jsonFrom" action="/jsonAction" method="get">
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="name"  placeholder="请输入用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="password" placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="button" class="btn btn-default" id="btn-submit">查询</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="panel-body"></div>
        </div>
    </div>
</body>
<script type="text/javascript">
    $(function () {

        $('#btn-submit').click(function () {
            var param = {
                name:$('#name').val(),
                password:$('#password').val()
            };
            $.ajax({
                type:"GET",
                url: "jsonAction.action",
                data: param,
                dataType:"text", //ajax返回值设置为text（json格式也可用它返回，可打印出结果，也可设置成json）
                success: function(json){
                    var obj = $.parseJSON(json);  //使用这个方法解析json
                    var state_value = obj.result;  //result是和action中定义的result变量的get方法对应的
                    alert(state_value);
                },
                error: function (json) {
                    alert("json=" + json);
                    return false;
                }
            });//ajax end
          //先用原生的js语句实现
           /* var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                //IE5,IE6
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
            }
            xmlhttp.onreadystatechange=function () {
                if(xmlhttp.readyState==4 && xmlhttp.status ==200){
                    alert(xmlhttp.responseText);
                    var obj = eval('('+xmlhttp.responseText+')');
                    alert(obj.result);
                }
            }
            var str ='1=1';
            if($('#name').val()!=null){
                str +='&name='+$('#name').val();
            }
            if($('#password').val()!=null){
                str +='&password='+$('#password').val();
            }
            xmlhttp.open("GET","jsonAction.action?"+str,true);
            xmlhttp.send();*/
        });
    });
</script>
</html>