您的位置：首页 > 编程语言 > Java开发

Struts2中Json格式异步数据交…

2014-03-29 22:11 423 查看

注意

：博客所有源码在爱源码，爱编程QQ群群共享中公开，需要请加群下载！群号：175551460

Json格式数据在Ajax数据交互中具有举足轻重的位置，在数据的可操作性上是：安全的，灵活的，易控的。
下面我们在Struts2.1 中来操作Json实现异步处理。----->>
1.首先导入json相关的.jar文件，可加载struts2.1自动加载.jar文件，也可从网上获得--->

实现 json异步交互主要需要-------------->红箭头上的.jar文件。
取得.jar文件后，我们只需将它们拷贝到项目的WEB-INF/lib目录下：
2.之后，我们要取得Struts 对json的支持：只需在struts.xml中写入(相关支持数据)即可：
2.1：获取相关支持数据：在引用库中找到上struts-plugin.xml文件

2.2:打开struts-plugin.xml文件，拷贝红色矩形框中这些数据。

2.3:现在将数据复制到struts.xml文件中：

最好指定一下默认编码集

3：我们写好个UserAction的类文件，里面拥有如下字段，并封装属性：

3.1：写个封装对象集合的方法，并return“list”；（注意：本例只对 LIST 集合进行操作，你可举一反三）

3.2：在struts.xml定义如下数据，根据动态方法取得相关json数据：（注意：映射类为之前新建的UserAction类）

4:现在我们新建JSP页面进行测试了。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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>

    <title>Struts2+JQuery+JSON</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/json.js"></script>
  </head>

  <body>
    <input id="getMessage" type="button" value="获取单个值"/>
    <input id="getUserInfo" type="button" value="获取UserInfo对象"/>
    <input id="getList" type="button" value="获取List对象"/>
    <input id="getMap" type="button" value="获取Map对象"/>
    <br>
    <br>
    <br>
    
    <div id="message"></div>
   <form>
        用户ID：<input name="userInfo.userId" type="text"/><br/>
        用户名：<input name="userInfo.userName" type="text"/><br/>
        密   码：<input name="userInfo.password" type="text"/><br>
        <input id="regRe" type="button" value="注册"/>
    </form>

  </body>
</html>

5:导入JQuery.js文件，并新建json.js文件添加如下代码：

$(document).ready(function(){
//为获取单个值的按钮注册鼠标单击事件
$("#getMessage").click(function(){
  $.getJSON("user_returnMessage.action",function(data){
   //通过.操作符可以从data.message中获得Action中message的值
   $("#message").html("<font color='red'>"+data.message+"</font>");
  });
});
//为获取UserInfo对象按钮添加鼠标单击事件
$("#getUserInfo").click(function(){
  $.getJSON("user_returnUserInfo.action",function(data){
   //清空显示层中的数据
   $("#message").html("");
   //为显示层添加获取到的数据
   //获取对象的数据用data.userInfo.属性
   $("#message").append("<div><font color='red'>用户ID："+data.userInfo.userId+"</font></div>")
          .append("<div><font color='red'>用户名："+data.userInfo.userName+"</font></div>")
          .append("<div><font color='red'>密码："+data.userInfo.password+"</font></div>")
  });
});
//为获取List对象按钮添加鼠标单击事件
$("#getList").click(function(){
  $.getJSON("user_returnList.action",function(data){
   //清空显示层中的数据
   $("#message").html("");
   //使用jQuery中的each(data,function(){});函数
   //从data.userInfosList获取UserInfo对象放入value之中
   $.each(data.userInfosList,function(i,value){
    $("#message").append("<div>第"+(i+1)+"个用户：</div>")
       .append("<div><font color='red'>用户ID："+value.userId+"</font></div>")
       .append("<div><font color='red'>用户名："+value.userName+"</font></div>")
       .append("<div><font color='red'>密码："+value.password+"</font></div>");
   });
  });
});
//为获取Map对象按钮添加鼠标单击事件
$("#getMap").click(function(){
  $.getJSON("user_returnMap.action",function(data){
   //清空显示层中的数据
   $("#message").html("");
   //使用jQuery中的each(data,function(){});函数
   //从data.userInfosList获取UserInfo对象放入value之中
   //key值为Map的键值
   $.each(data.userInfosMap,function(key,value){
    $("#message").append("<div><font color='red'>"+key+"用户ID："+value.userId+"</font></div>")
          .append("<div><font color='red'>"+key+"用户名："+value.userName+"</font></div>")
          .append("<div><font color='red'>"+key+"密码："+value.password+"</font></div>");
   });
  });
});
//向服务器发送表达数据
$("#regRe").click(function(){
  //把表单的数据进行序列化
  var params = $("form").serialize();
  //使用jQuery中的$.ajax({});Ajax方法
  $.ajax({
   url:"user_gainUserInfo.action",
   type:"POST",
   data:params,
   dataType:"json",
   success:function(data){
    //清空显示层中的数据
   $("#message").html("");
   //为显示层添加获取到的数据
   //获取对象的数据用data.userInfo.属性
   $("#message").append("<div><font color='red'>用户ID："+data.userInfo.userId+"</font></div>")
          .append("<div><font color='red'>用户名："+data.userInfo.userName+"</font></div>")
          .append("<div><font color='red'>密码："+data.userInfo.password+"</font></div>")
   }
  });
});
});

6.运行效果：

本例就到这里，我们团队来自奥斯科技

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航