prototype+json+struts2創建簡單的ajax應用

原創 西兹兹 2020-06-16 07:24
顯示頁面
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3. <html>
  4.   <head>
  5.     <title>test</title>
  6.     <meta http-equiv="pragma" content="no-cache">
  7.     <meta http-equiv="cache-control" content="no-cache">
  8.     <meta http-equiv="expires" content="0">    
  9.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  10.     <meta http-equiv="description" content="This is my page">
  11.     <!--
  12.     <link rel="stylesheet" type="text/css" href="styles.css">
  13.     -->
  14.   </head>
  15.     <script type="text/javascript" src="js/common/prototype.js"></script>
  16.     <script language="javascript" type="text/javascript">
  17.         function getJson()
  18.         {
  19.              var url = 'JSONExample.action';
  20.              var pars = '';
  21.              var myAjax = new Ajax.Request(url,{
  22.                  method:'get',
  23.                  encoding:'UTF-8',
  24.                  parameters:pars,
  25.                  onComplete:function(json){
  26.                      var JSONobj=eval('('+ json.responseText +')');
  27.                      var html="" ;
  28.                      var menuid="";
  29.                      
  30.                      html += "<li>" + JSONobj.newName +"</li>";
  31.                      
  32.                      var ints = JSONobj.ints; 
  33.                      for (var i=0; i< ints.length; i++){
  34.                         html += "<li>" + ints[i] +"</li>";
  35.                      }
  36.                      
  37.                      var map = JSONobj.map; 
  38.                      for(array in map){
  39.                         html += "<li>" + array + ":" + map[array] +"</li>";
  40.                      }
  41.                      
  42.                      $("item").innerHTML=html;
  43.                  }
  44.              });
  45.       
  46.         }
  47. </script>
  48.     <body>
  49.       <input type="button" name="button" id="button" onclick="getJson()"value="點擊測試">
  50.       <div id="item"></div>
  51.     </body>
  52. </html>

struts.xml配置文件
  1.     <package name="example"  extends="json-default">  
  2.       <action name="JSONExample" class="jSONExample" method="executeJson">  
  3.          <result type="json"/>  
  4.        </action>  
  5.     </package>   
這裏使用到了json struts2結合的插件，請自己去下載那個jar包


action
  1. package action;
  3. import java.util.HashMap;
  4. import java.util.Map;
  5. import com.googlecode.jsonplugin.annotations.JSON;
  6. import com.opensymphony.xwork2.ActionSupport;
  8. /**
  9.  *  @author 王盛武 <a href="[email protected]"/> 
  10.  *  @date Aug 1, 200812:10:35 PM
  11.  */
  12. public class JSONExample extends ActionSupport {
  13.     /**
  14.      * 
  15.      */
  16.     private static final long serialVersionUID = 4588482034890372410L;
  17.     // 封裝請求參數的三個屬性
  18.      //format=  例如"yyyy-MM-dd'T'HH:mm:ss"。 
  19.     private String field1;
  20.     private transient String field2;
  21.     
  22.     private String field3;
  23.     // 封裝處理結果的屬性
  24.     private int[] ints = { 10, 20 };
  25.     @SuppressWarnings("unchecked")
  26.     private Map map = new HashMap();
  27.     private String customName = "custom";
  29.     @SuppressWarnings("unchecked")
  30.     public String executeJson() {
  31.         map.put("name1", "sinlff1");
  32.         map.put("name2", "sinlff2");
  33.         map.put("name3", "sinlff3");
  34.         return SUCCESS;
  35.     }
  36.     
  37.     // 三個請求參數對應的setter和getter方法
  38.     @JSON(serialize = false) //format
  39.     public String getField1() {
  40.         return field1;
  41.     }
  43.     public void setField1(String field1) {
  44.         this.field1 = field1;
  45.     }
  47.     @JSON(serialize = false)
  48.     public String getField2() {
  49.         return field2;
  50.     }
  52.     public void setField2(String field2) {
  53.         this.field2 = field2;
  54.     }
  56.     @JSON(serialize = false) //format
  57.     public String getField3() {
  58.         return field3;
  59.     }
  61.     public void setField3(String field3) {
  62.         this.field3 = field3;
  63.     }
  65.     public void setCustomName(String customName) {
  66.         this.customName = customName;
  67.     }
  69.     // 封裝處理結果的屬性的setter和getter方法
  70.     public int[] getInts() {
  71.         return ints;
  72.     }
  74.     public void setInts(int[] ints) {
  75.         this.ints = ints;
  76.     }
  78.     @SuppressWarnings("unchecked")
  79.     public Map getMap() {
  80.         return map;
  81.     }
  83.     @SuppressWarnings("unchecked")
  84.     public void setMap(Map map) {
  85.         this.map = map;
  86.     }
  88.     // 使用註釋語法來改變該屬性序列化後的屬性名
  89.     @JSON(name = "newName")
  90.     public String getCustomName() {
  91.         return this.customName;
  92.     }
  94. }




發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

前端面試題 - vue的雙向綁定原理是什麼？

前端面試題 - vue的雙向綁定原理是什麼？ vue2的雙向數據綁定是通過數據劫持結合發佈者訂閱者模式的方式來實現。 通過object.defineProperty來劫持各個屬性的setter，getter，在數據變化時發佈消息給訂閱者，

原創 2024-05-17 00:41:12

H5按需加載探索——Webpack模塊化示例

1-前言 瀏覽器早已已經全面支持ESM即ES模塊化，可以實現前端代碼的模塊化，以及按需加載/下載，甚至還提供了一個非常貼心的ES特性：importmap 通過importmap，可以代碼零修改實現按需加載： 1.1 在html中聲明模塊的

原創 2024-05-22 11:10:06

一文了解npm install -g和npm install --save-dev的關係

本文分享自華爲雲社區《npm install -g 和 npm install --save-dev 的關係》，作者： SHQ5785。 一、npm install 本地安裝 將安裝包放在 ./node_modules 下（運行 npm

原創 2024-05-21 22:59:29

探討篇（二）：分層架構的藝術 - 打造合理且高效的架構體系

上篇從服務粒度角度進行了探討，本文繼續從服務內的分層角度探討。 本文的觀點源自我在學習與實踐過程中的深思熟慮，尚處於不斷探索和驗證的階段。希望能“拋磚引玉”，激發更多的討論與交流。讓我們共同進步，在探討與實證中尋求真知。 一、背景 應用

原創 2024-05-20 23:55:42

Java常用的JSON序列化與反序列化工具實踐

JSON簡介： JSON（Java Script Object Notation）是一種輕量級的數據交換格式，通常用於在不同系統之間傳輸數據。它基於 JavaScript 對象語法，但已成爲一種獨立於語言的格式。JSON 數據以鍵值對的形式

原創 2024-05-20 23:55:38

MQTTX 1.9.10 發佈：升級 Faker.js、增強連接與訂閱診斷、優化 UI

MQTTX 1.9.10 版本現已發佈。本次更新帶來了重要的 Faker.js 升級、對連接斷開和訂閱問題的深度診斷，並增強了 CLI 與 UI 的多項功能。此次更新旨在簡化用戶操作流程，並提升問題排查效率。 點擊此處下載最新版本：htt

原創 2024-05-20 22:10:05

Vite 的預構建原理與實踐| 京東物流技術團隊

Vite 預構建的核心原理 1. 兼容性與性能的雙重目標 Vite 的預構建旨在解決兩個主要問題：兼容性和性能。對於兼容性，由於 Vite 在開發階段將所有代碼視爲原生 ES 模塊，因此需要將 CommonJS 或 UMD 格式的依賴轉

原創 2024-05-17 23:56:42

O2OA平臺流程催辦怎麼做

O2OA平臺設計了靈活的消息提醒數據交互方式，開發者可以根據自己的需要，來消費消息提醒數據，也可以將消息提醒數據接入到Kafka消息中間件來實現消息的準實時提醒。本篇主要介紹如何在O2OA服務器中設置流程的催辦提醒消息。   催辦

原創 2024-05-16 22:48:44

`iris.context`獲取參數的具體代碼是什麼？

獲取URL路徑參數： go 複製 package main import ( "github.com/kataras/iris/v12" ) func main() {

原創 2024-05-16 01:55:00

AppBuilder低代碼體驗：構建雅思大作文組件

Ai technology 前言 AppBuilder上線了低代碼製作組件功能，可以通過工作流的方式構建自定義組件，完成簡單Agent無法完成的複雜功能，使得生成的文本更加定製化，

原創 2024-05-16 00:15:54

解鎖工業數據流：NeuronEX 規則調試功能實操指南

工業企業要實現數據驅動的新質生產力升級，一個重要的環節便是如何準確、可靠地收集並利用生產過程中的數據流。 NeuronEX 工業邊緣軟件中的規則調試功能，可幫助用戶在安全的環境中模擬數據輸入，測試和優化數據處理規則，從而提前發現並解決潛在

原創 2024-05-14 22:10:46

分析 MySQL 中的內存使用情況

瞭解如何可視化 MySQL 連接的內存使用情況。 作者：Benjamin Dicken 本文和封面來源：https://planetscale.com/blog/，愛可生開源社區翻譯。 本文約 3000 字，預計閱讀需要 10 分鐘。

原創 2024-05-14 00:04:20

面試官：說說你對序列化的理解

本文主要內容 背景 在Java語言中，程序運行的時候，會產生很多對象，而對象信息也只是在程序運行的時候纔在內存中保持其狀態，一旦程序停止，內存釋放，對象也就不存在了。 怎麼能讓對象永久的保存下來呢？--------對象序列化 。 何

osc_61miaq6u 2024-05-13 22:58:28

O2OA翱途開發平臺前端API和後端API的訪問以及使用

O2OA是一個高度可定製化的企業級開發平臺，它的API（應用程序接口）分爲前端和後端，各自有不同的用途，平臺爲用戶開放了全部的後端API供開發者使用，開發者可以根據各類API組織出符合實際業務需求的新服務或者新業務，用於數據查詢，業務接

原創 2024-05-13 22:50:31

消費者太多！RocketMQ又炸了！

去年寫過一篇《Topic數量太多！RocketMQ炸了！》，大家評價還不錯。 結果，2024年的開頭，我們的RocketMQ又炸了！ 1、問題現象 先說明下RocketMQ版本， 4.6.0的老版本了。 線下環境客戶端啓動會頻

原創 2024-05-13 12:34:50