JQuery,Ajax在strut2 中的运用

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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值