Struts2+jquery+Ajax实现json数据的传输

最新推荐文章于 2019-03-13 13:20:35 发布

oliver233

最新推荐文章于 2019-03-13 13:20:35 发布

阅读量815

点赞数

分类专栏： javaweb学习过程文章标签： struts jquery ajax

本文链接：https://blog.csdn.net/oliver233/article/details/70988779

版权

javaweb学习过程专栏收录该内容

14 篇文章 0 订阅

订阅专栏

javaweb在使用前后台数据交互时，常常用到Ajax的异步传输来减少数据传输量，让页面局部刷新，而不影响整体页面。

json作为一种简单的轻量级的数据交换格式，大量用于前后台数据交换的格式，类似于map，也是键值关系的。

Jquery.js中集成了Ajax的处理函数，接下来介绍Struts2框架下使用Ajax来让前台获取一段json数据

我用的是myeclipse10，直接导入的jar包，里面的struts2的jar也包含了json的jar，其中缺少一个包，就是ezmorph.jar,这是java处理json格式转换的必备jar，不引不会报错，但是前台无法接收json数据

下载地址：点击下载资源，下载导入即可。

首先我们来看前台页面。

index.jsp

<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%@taglib uri="/struts-tags" prefix="s" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <style type="text/css">
        .time{
            width:300px;
            background:#666;
        }
        .main{
            width:300px;
            height: 400px;
            background: #f60;
        }
    </style>
    <script type="text/javascript">
        function btn(){

            $.ajax({
                //提交方式
                type:"post",
                //提交的Action
                url:"demoAction",
                data:{
                //提交的数据
                    name:$("input[name=name]").val(),
                    age:$("input[name=age]").val()
                },
                //返回数据类型
                dataType:"json",
                success:function(data){
                    //eval()是JS中将JSON的字符串解析成JSON数据格式的一种方法
                    var d = eval(data);
                    //将解析的de数据放入相应的id中
                    $("#s_name").text(""+d.name+"");
                    $("#s_age").text(""+d.age+"");
                },
                error:function(data)
                {
                    //失败的话
                    alert("fail");
                },
            });

        }

    </script>

  </head>

  <body>
    <div class="time" name="time">
        <% 
            SimpleDateFormat fomatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); 
            Date currentTime = new Date(); 
            String str = fomatter.format(currentTime); 
         %>
         <%=str %>
    </div>
    <form action="#" method = "post">
        name:<input type="text" name="name"/>
        age:<input type="text" name="age"/>
        <input type="button" class="btn" value="submit" onclick="btn()"/>
    </form>
    <div class="main" name="main">
        <span id="s_name">nnnn</span>
        <span id="s_age">aaaa</span>
    </div>
  </body>
</html>

运行图如下：
这里写图片描述
上面的时间就是验证异步传输，也就是只有橙色div会刷新，整个页面不会刷新
这时，我们输入相应的name和age。
进入Action的代码
DemoAction.java

package com.action;

import java.util.HashMap;
import java.util.Map;

import net.sf.json.JSONObject;

import com.opensymphony.xwork2.ActionSupport;

public class DemoAction extends ActionSupport {
    //获取name和age
    private String name;
    private String age;
    //构造返回的json数据
    private JSONObject result;

    public String getName() {
        return name;
    }

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

    public String getAge() {
        return age;
    }

    public void setAge(String age) {
        this.age = age;
    }



    public JSONObject getResult() {
        return result;
    }

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

    @Override
    public String execute() throws Exception {
        // TODO Auto-generated method stub

        System.out.println(name);
        System.out.println(age);
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("name", name);
        map.put("age", age);

        result = JSONObject.fromObject(map);

        return SUCCESS;
    }
}

接下来是配置struts.xml。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
    <package name="default" extends="struts-default,json-default" namespace="">
        <action name="demoAction" class="com.action.DemoAction">
            <result type="json">
                <!-- 这里的result名字对应着action中jsonObject那个，必须有get,set方法 -->
                <param name="root">result</param>
            </result>
        </action>
    </package>
</struts>

然后跑一下就可以了，我们只是验证，所以我只是完成了数据传入后台，封装成json，再返回前台，通过js中eval()函数解析，将数据注入到一个div中的过程。
运行结果
这里写图片描述
可以多次输入，看到，那个时间在页面未刷新的情况下不改变，也就是说只有橙色在刷新，那么久大大减少了数据流的传输。
会了这个小Demo之后，就可实现数据的传输，然后处理，再返回了。