现在的位置: 首页 > 综合 > 正文

Struts2中Json格式异步数据交…

2019年03月08日 ⁄ 综合 ⁄ 共 4447字 ⁄ 字号 小 中 大 ⁄ 评论关闭
注意Struts <wbr>2 <wbr>中 <wbr>Json <wbr>格式异步数据交互：博客所有源码在爱源码，爱编程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="获取单个值"/>&nbsp;&nbsp;
    <input id="getUserInfo" type="button" value="获取UserInfo对象"/>&nbsp;&nbsp;
    <input id="getList" type="button" value="获取List对象"/>&nbsp;&nbsp;
    <input id="getMap" type="button" value="获取Map对象"/>&nbsp;&nbsp;
    <br>
    <br>
    <br>
    <!-- 要显示信息的层 -->
    <div id="message"></div>
   <form>
        用户ID：<input name="userInfo.userId" type="text"/><br/>
        用户名：<input name="userInfo.userName" type="text"/><br/>
        密&nbsp;&nbsp;&nbsp;码：<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.运行效果：
图片
图片
本例就到这里，我们团队来自奥斯科技


返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞