JQuery,Ajax在strut2 中的运用

来源：互联网发布：数据备份下载编辑：程序博客网时间：2024/06/13 16:03

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;    }}

示例就这些东西了。刚开始学这方面知识的同学可以试试。

阅读全文

1 0