歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

Struts中異步傳送XML和JSON類型的數據

昨天和今天學習了XML和JSON型在struts2中的用法,當然,這需要與ajax結合起來使用,在項目中可以用到用戶注冊驗證用戶唯一性、無需刷新頁面即可刷新部分數據等操作。

雖然就目前來說,JSON要比XML流行,但是可以預見的是,未來一段時間內,還是會有不少的企業依然會用到XML文件,故這裡同時講解了XML文件的生成和在JS中的解析。

我想熟悉Web的人大多數應該都會使用AJAX來與服務器進行異步的交互數據而不影響前台用戶的使用,改善了用戶體驗。

關於用於生成XML和JSON格式數據的原理,我沒有詳細研究,後面隨著學習的深入,我想我會進一步進行研究學習的。

下面開始說明原理:

前台頁面通過ajax發請求到後台,根據請求數據創建要返回到前台的對象,然後將對象組裝成XML或則JSON格式的數據,送回到前台,在JS中對返回的數據進行解析並顯示到頁面上。

這兩個東西是一起進行學習的,所以對XML和JSON數據格式的學習,放到了同一個工程內。

第一步,新建web工程struts2-ajax,首先加入對應的jar包,總體工程結構及jar包如下:

第二步,配置web.xml文件,指定struts2的filter,配置文件信息如下:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
 xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  <filter>
  <filter-name>struts2</filter-name>
  <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
  </filter>
  <filter-mapping>
  <filter-name>struts2</filter-name>
  <url-pattern>*.action</url-pattern>
  </filter-mapping>
</web-app>
第三步,寫界面,我這裡為了省事期間,就直接在index.jsp中進行修改,代碼如下:

index.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <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">
 <script type="text/javascript" src="scripts/jquery-1.4.4.js"></script>
 <script type="text/javascript">
  function getInfo(){
  $.post("getXMLAction.action",
  {
  name: $("#name").val()
  },function(returnedData, status)
  {
  alert(returnedData + "," + status);
  var name = $(returnedData).find("name").text();
  var age = $(returnedData).find("age").text();
  var height = $(returnedData).find("height").text();
  var address = $(returnedData).find("address").text();
  var html = "<table width='60%' border='1'>" +
  "<tr><td>name</td>" +
  "<td>age</td>" +
  "<td>height</td>" +
  "<td>address</td></tr><tr><td>" + name + "</td><td>" + age + "</td><td>" + height + "</td><td>" + address + "</td></tr></table>";
  $("body table:eq(0)").remove();
  $("body").append(html);
  }); 
  }
  function getJsonInfo() {
  $.post("getJSONAction.action", {name:$("#name").val()}, function(returnedData, status) {
    alert(returnedData);
    var html = "<table width='60%' border='1'>" +
  "<tr><td>name</td>" +
  "<td>age</td>" +
  "<td>height</td>" +
  "<td>address</td></tr><tr><td>" + returnedData.name + "</td><td>" + returnedData.age + "</td><td>" + returnedData.height + "</td><td>" + returnedData.address + "</td></tr></table>";
  $("body table:eq(0)").remove();
  $("body").append(html);
  });
  }
 
 </script>
  </head>
 
  <body>
  <select id="name">

 <option value="zhangsan">zhangsan</option>
 <option value="lisi">lisi</option>

  </select> 
    <input type="text" id="address"/>
 <input type="button" value="getXMLinformation" onclick="getInfo();"><br>
 <input type="button" value="getJsonInformation" onclick="getJsonInfo();"/>
  </body>
</html>

更多詳情見下一頁:http://www.linuxidc.com/Linux/2013-08/88247p2.htm

Copyright © Linux教程網 All Rights Reserved