JQuery,Ajax在strut2 中的运用

最新推荐文章于 2021-08-06 02:33:08 发布

RANJIANGCHENG

最新推荐文章于 2021-08-06 02:33:08 发布

阅读量360

点赞数 1

分类专栏： jquery ajax异步请求 javaweb 文章标签： jquery struts ajax 前端开发

本文链接：https://blog.csdn.net/RANJIANGCHENG/article/details/77600712

版权

javaweb 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

ajax异步请求

2 篇文章 0 订阅

订阅专栏

Jquery是前端优秀的框架，也是前端开发的必备利器，Ajax提供了一种异

步数据交互的技术，可以在不刷新整个页面的前提下刷新页面的局部，由

于采用异步数据提交方式，使得对用户操作更加友好。

在传统的struts2框架的开发中，一般需要在jsp页面中引用struts2的标签

库,这点对前端开发是不友好的，因为前端开发们一般都不会这些标签

。
在需求上前端和后端一般都是独立开发，而两者之间的数据交互都使用

JQuery，Ajax技术来完成。因此掌握一些JQuery和Ajax技术对web后端

开发来说也是必要的。下面就给一个这样的示例。

前端：

需要在页面中引入JQuery文件，使用JQuery封装需要提交的数据和编写

鼠标点击事件，AJax在把数据封装成JSON格式的数据并提交到指定的

url。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax传递数据</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

<script type="text/javascript">

            $(function(){

                $("#button_tijiao").click(function(){
                    var params={
                                name:$("#username").val(),
                                password:$("#password").val(),
                            };

                $.ajax({
                        type:"POST",
                        url:"jsonaction_AA",
                        data:params,
                        dataType:"text",
                        success:function(json){
                                var obj=$.parseJSON(json);
                                var statevalue=obj.result;
                                alert(statevalue);
                            },
                            error:function(json){
                                    alert("json="+json);
                                    return false;
                                }
                    })

                });
            });


</script>
</head>
<body>

用户名:<input type="text" name="name" id="username"/>

密码:<input type="password" name="password" id="userpassword"/>

<button id="button_tijiao">submit</button>

</body>
</html>

后端：

需要加入struts2-json-pluging.2.3.24.jar包，用于处理json数据格式的

数据

web.xml文件没什么可说的，跟以前配置一样。

要注意的是struts2.xml文件的配置：

1.在extends继承属性上要加上json-default。

2.在action返回的<result>标签中指定

type=“json”

3.需要在 <result> 节点下添加：

<param name="root">result</param>

此处的result与action中返回数据的String名相同

示例：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
    "http://struts.apache.org/dtds/struts-2.3.dtd">
    <struts>
        <package name="ajaxdemo" extends="struts-default,json-default">
            <action name="jsonaction_*" class="com.action.AjaxAction" method="{1}">
                <result type="json">
                    <param name="root">result</param>
                </result>
            </action>
        </package>
    </struts>

action 的编写：

package com.action;

import com.opensymphony.xwork2.ActionSupport;

public class AjaxAction extends ActionSupport{

    private static final long serialVersionUID = 1L;

    private String name;

    private String password;

    private String result;  //返回给页面的结果，也可以封装为json

                            //格式的数据在返回


     //此方法用来提取result
    public String getResult()   
    {
        return 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 AA()throws Exception
    {
        result="this is aa faction return";

        return SUCCESS;

    }

    @Override
    public String execute() throws Exception {

        result=name+password;

        return SUCCESS;
    }



}