1. 程式人生 > >struts2中關於前端和後臺的資料互動

struts2中關於前端和後臺的資料互動

使用struts2框架時,要想將後臺的資料傳送到前端頁面,可以在action中定義一個方法,如下圖所示:


當然,使用struts2框架需要在struts.xml中配置,配置資訊如下:

此處的<result name="success" type="json"></result>說明當action中定義的方法返回的是success,後臺可以向前端傳遞一組json型別的資料,我們可以直接在前端使用ajax接收該組資料。還有一種情況,見下圖:

此時我們返回的是一個name="airList"對應的頁面,那麼我們如何在前端接收到airdetecs中的資料呢
這裡面又要分兩種情況:
①如果是在html(即body)中接收,直接使用EL表示式即可
②如果是在<script>中,那麼我們不能直接使用EL表示式進行接收,問題的核心在於${}之中的物件型別,如果是java物件 那當然取不到,如果是具體到字串的值 那麼只要加引號就能使用,所以, 後臺可以在把java物件放進model之前,將java物件轉化為json字串,這樣直接在js中定義一個物件,給他賦值為${}即可,參照上圖,在方法中加JSONArray.fromObject()方法,將java物件轉化為json字串,這樣在前端<script>程式碼中也可以直接用EL表示式進行接收(${}),此時我們只需要將資料列印到前端控制檯,便可以.出相應的資料,加以使用。
接下來說說如何將前端的資料傳遞到後臺,此專案中我在前端得到了多選框中的倉號資料,例如倉號分別為1、2、3、4、5、6,那麼我們如何將這組資料傳遞到後臺以供使用呢?有兩種方法,第一種是將這個資料拼接成一個字串,將這個字串放到一個obj物件中,通過ajax將這個物件傳遞到後臺,加上get、set方法即可,第二種是通過url,見下圖
當請求showMoreDetails()方法時,即可將url中的4個引數傳遞到後臺,此時我們為每個引數新增相應的get、set方法即可在後臺取到值

最近在使用struts2做專案,從一個初學者開始,有問題歡迎討論!

相關推薦

前端後臺資料互動總結

web伺服器應用程式:apache,tomcat,nodeJs、Nginx、IIS、 後臺語言:php,java,.net,nodeJS 資料庫:Mysql,SqlServer,Oracle 後臺mvc:ssh  ssm 前臺mvc:js ,jsp 資料互動:a

淺談web前端後臺資料互動

1.什麼是web伺服器? 伺服器: 通俗理解,一臺24小時工作的機器 web伺服器:一臺24小時工作的能處理web請求的伺服器 看圖,用例項說話 2.web伺服器的作業系統 既然伺服器是一臺機器,那麼就會有作業系統 常見的伺服器上安裝的作業系

web前端後臺資料互動

1.前端請求資料URL由誰來寫? 在開發中,URL主要是由後臺來寫的,寫好了給前端開發者.如果後臺在查詢資料,需要藉助查詢條件才能查詢到前端需要的資料時,這時後臺會要求前端提供相關的查詢引數,這裡的查詢引數也就是URL請求的引數。 2.介面文件主要由誰來寫? 介面文件也是主

Django前端後臺資料互動:用json傳輸資料到javascript來畫hichart圖表

前端和後臺的資料傳輸是個很重要的環節.專案需要把資料用hichart顯示出來,就涉及到Django後臺傳輸資料到javascript的問題. 因為圖表比較多,javascript部分寫到單獨的js檔案裡,不寫在html檔案裡,在html中呼叫js檔案. 網上

Salesforce LWC學習(五) LDS & Wire Service 實現後臺資料互動 & meta xml配置

之前的幾節都是基於前臺變數進行相關的操作和學習,我們在專案中不可避免的需要獲取資料以及進行DML操作。之前的內容中也有提到wire註解,今天就詳細的介紹一下對資料進行查詢以及DML操作以及Wire Service相關的知識。 一. LDS 學習LDS以前可以先看一下aura中LDS的概念salesforce

struts2關於前端後臺資料互動

使用struts2框架時,要想將後臺的資料傳送到前端頁面,可以在action中定義一個方法,如下圖所示:當然,使用struts2框架需要在struts.xml中配置,配置資訊如下:此處的<result name="success" type="json"><

vue專案前端渲染後臺資料:圖片頁面詳情

1.從後臺獲取圖片處理 需要對圖片字元拼接 <img :src="host+'/'+list.pro_img" alt=""> // <img :src="'http://www.xxx.com'+'/'+list.pro_img" alt=""> data (

使用ajax完成python flask前端後臺資料互動

一、前端頁面中 html檔案中: {% extends 'base.html' %} {% block scripts %} {{ super() }} {# <script src="http://echarts.baidu.com/dist/echa

利用ajax提交表單,實現資料前端後臺資料互動的完整流程演示

該演示需要用到  1 : json.jar(下載)                               2 : jquery.js(下載) 流程演示:1.點選“登入”按鈕,傳參到後臺                     2.後臺獲取資料,處理分析資料,利用JSO

使用Echarts總結之——使用柱狀圖地圖與後臺資料互動

一、引入js 當然首先肯定是要引入相關的echart, 簡單的開發基本上一個<script language="javascript" type="text/javascript" src="$

【通訊】前端的幾類資料互動方式

資料互動 主要從下面幾類講解: 1、http協議 2、form表單 3、ajax–官方提供,單向,浪費流量,預設不能跨域(不能從a.com讀取b.com下的東西),但有跨域的方法 4、jsonp ——民間,支援跨域,不推薦,破壞了http自身的安全協議

前端後臺進行大量資料同步的一個小記

    最近在做一個前端收銀的專案,其中一塊很噁心的問題就是商品庫資料同步的問題,來記錄一下整個過程。     由於商品同步的資料量較大,所以採用了檔案同步的方式。     整個邏輯流程如下:      ①下載服務端資料(zip壓縮包)→②解壓並解析裡面的檔案列表(file

講給Android程序員看的前端後臺教...[Android]

.html dad get clas mys bdd uos b250 htm 2o2c8k該俅磁莢禱姑http://blog.sina.com.cn/s/blog_17bde30600102xi86.htmlgky4c0既諳哨嘿砍魏http://blog.sina.com

二十六、python學習之前端(九):JQuery資料互動

一.juqery物件: js中的物件,就是python中的字典: 1定義方法: 定義方法1: var obj1 = {name:"張三", "age":18, "address":"三里屯"} 定義方法2: var obj2 = new Object(); ob

Spring mvc,jQueryJSON資料互動

一、實驗環境的搭建 1、Spring mvc jar。 匯入spring mvc執行所需jar包。匯入如下(有多餘)     2、json的支援jar       3、加入jQuery。

Flask前端頁面的資料重新整理

Flask中前端頁面的資料重新整理 Flask中前端頁面的資料重新整理 1. 後端重新整理頁面的流程 1.1實現伺服器的API介面文件 1.2使用Flask實現Web伺服器應用程式的構建 1.3 實現前端請求URL

85_iOS乾貨44_#import引號尖括號的區別 + xcode黃色藍色資料夾的區別

一,#import引號和尖括號的區別 1,#include命令 #include是C/C++的預處理指令(Preprocessor Directive),主要作用是把標頭檔案引入到任意原始檔中,在預處理階段,被包含的檔案在原始檔的指令地點進行整體替換 2,尖括號:   #includ

Struts2過濾器攔截器的區別

過濾器和攔截器的區別:   ①攔截器是基於Java的反射機制的,而過濾器是基於函式回撥。   ②攔截器不依賴與servlet容器,過濾器依賴與servlet容器。   ③攔截器只能對action請求起作用,而過濾器則可以對幾乎所有的請求起作用。   ④攔截器可以訪問acti

匯出excel表格,前端後臺匯出

問題:專案框架中匯出不知道有什麼限制,資料稍微大點匯出不了,向上面請求解決,結果一圈推下來又推回來了,所以決定自己寫,參考了網上很多大神的部落格,開始試了前端匯出,想著比較簡單,但是亂碼問題始終解決不了,方法也貼上來,如果有大佬會的可以指點下。 前段匯出:   首先繫結匯出按鈕的click事件,我查詢是一次

vue-cli與後臺資料互動增刪改查

1. 安裝vue-resource  npm install vue-resource --save 2.訪問後臺地址,在vue中會出現跨域的問題,以下為解決方案   在config下的index.js 中配置proxyTable代理設定 proxyTable: {