搜尋
首頁web前端js教程實作Struts2和Ajax資料交互詳解

這次帶給大家實現Struts2和Ajax資料交互詳解,實現Struts2和Ajax資料交互的注意事項有哪些,下面就是實戰案例,一起來看一下。

前言

我們從Web 2.0的隨波逐流,Ajax的大放異彩說起,Struts2框架自己整合了對Ajax的原生支持(struts 2.1.7+,先前的版本可以透過外掛實現),框架的整合只是使得JSON的創建變得異常簡單,並且可以簡單的融入到Struts2框架中,當然這只是在我們需要JSON的時候才會顯得流光溢彩。

ajax請求在專案中常常使用,今天就平時掌握的總結一下,關於使用ajax請求到Struts2中的action時,前台頁面與後台action之間的資料傳遞互動問題。

這裡我主要記錄下自己所掌握的幾種方式。可以根據自己平時專案的需求來進行選擇。

 1.使用stream類型的result

#此類型可以直接讓Struts2中的action向客戶端瀏覽器產生文字回應。

範例:

jsp頁面:




 <title>ajax提交登录信息</title>
 
 <script></script>


<h3 id="异步登录">异步登录</h3>
<form>
 <textfield></textfield>
 <textfield></textfield>
 <input>
</form>
<p></p>

<script>
 $("#loginBtn").click(function(){
 $("#show").hide();
 //发送请求login 以各表单里歌空间作为请求参数
 $.get("login",$("#loginForm").serializeArray(),
  function(data,statusText){
  $("#show").height(80)
   .width(240)
   .css("border","1px solid black")
   .css("border-radius","15px")
   .css("backgroud-color","#efef99")
   .css("color","#ff0000")
   .css("padding","20px")
   .empty();
  $("#show").append("登录结果:"+data+"<br/>");
  $("#show").show(600);
 },"html");//指定服务器响应为html
 });
</script>

處理邏輯的action:

/**
 * Description:eleven.action
 * Author: Eleven
 * Date: 2018/1/26 18:09
 */
public class LoginAction extends ActionSupport{
 private String username;
 private String psw;
 //输出结果的二进制流
 private InputStream inputStream;
 public String login() throws Exception{
 if(username.equals("tom")&& psw.equals("123")){
  inputStream = new ByteArrayInputStream("恭喜您,登录成功".getBytes("UTF-8"));
 }else{
  inputStream = new ByteArrayInputStream("对不起,登录失败".getBytes("UTF-8"));
 }
 return SUCCESS;
 }
 //提供get方法
 public InputStream getInputStream() {
 return inputStream;
 }
 public String getUsername() {
 return username;
 }
 public void setUsername(String username) {
 this.username = username;
 }
 public String getPsw() {
 return psw;
 }
 public void setPsw(String psw) {
 this.psw = psw;
 }
}

action中除了接收頁面傳遞的用戶名、密碼外,還有一個InputStream類型的成員變量,並為它提供了對應的get方法。 get方法中傳回的二進位流將會直接輸出給客戶端瀏覽器。

struts.xml設定:

<?xml  version="1.0" encoding="UTF-8" ?>
nbsp;struts PUBLIC
 "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
 "http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
 <constant></constant>
 <constant></constant>
 <package>
 <action>
  <result>
  <!--指定stream流生成响应的数据类型-->
  <param>text/html
  <!--指定action中由哪个方法去输出InputStream类型的变量-->
  <param>inputStream
  </result>
 </action>
 </package>
</struts>

在瀏覽器中瀏覽該頁面,並輸入相關信息,然後提交,可以看到後台action直接將訊息資料傳回給頁面,而同時頁面也不需要進行刷新,而是直接在局部進行顯示,這是利用了ajax的非同步發送請求。請注意,此種方式需要在struts.xml檔中要配置類型為stream的流,並設定inputName屬性,並在action中提供InputStream對應的get方法。

運行截圖:

#2.使用json類型的result

有個jar包struts2-json-plugin-2.3.16.3.jar,可以為Struts2增加JSON插件,即當action中的result的類型設為json時,也可以在客戶端js中異步調用action,並且action中返回的數據,可以直接被JSON插件序列化成json格式的字串,並將該字串傳回給客戶端瀏覽器。

範例:

jsp頁面:




 <title>ajax提交登录信息</title>
 
 <script></script>


<h3 id="异步登录">异步登录</h3>
<form>
 <textfield></textfield>
 <textfield></textfield>
 <input>
</form>
<p></p>

<script>
 $("#loginBtn").click(function(){
 $("#show").hide();
 //发送请求login 以各表单里歌空间作为请求参数
 $.get("login",$("#loginForm").serializeArray(),
  function(data,statusText){
  //此时的data中包含username,psw,age
  $("#show").height(80)
   .width(300)
   .css("border","1px solid black")
   .css("border-radius","15px")
   .css("backgroud-color","#efef99")
   .css("color","#ff0000")
   .css("padding","20px")
   .empty();  
  alert(data);
  $("#show").append(data+"<br/>");
  $("#show").show(600);
 },"html");
 });
</script>

action程式碼:

public class LoginAction extends ActionSupport{
 private String username;
 private String psw;
 private int age;
 public String login() throws Exception{
  age = 18;
  return SUCCESS;
 }
 public String getUsername() {
  return username;
 }
 public void setUsername(String username) {
  this.username = username;
 }
 public String getPsw() {
  return psw;
 }
 public void setPsw(String psw) {
  this.psw = psw;
 }
 public int getAge() {
  return age;
 }
 public void setAge(int age) {
  this.age = age;
 }
}

struts.xml中設定:

<?xml  version="1.0" encoding="UTF-8" ?>
nbsp;struts PUBLIC
 "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
 "http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
 <constant></constant>
 <constant></constant>
 <package>
  <action>
   <result>
    <param>true
    <param>text/html
   </result>
  </action>
 </package>
</struts>

在瀏覽器中瀏覽該頁面,並輸入相關信息,然後提交,可以看到後台action直接將消息數據返回給頁面,而同時頁面也不需要進行刷新,而是直接在局部進行顯示,這是利用了ajax的非同步發送請求。請注意,此種方式需要在struts.xml檔案中要配置package繼承json-default,且配置result類型為json,並在action中提供需要傳遞資料的對應的get方法。當然了前提是增加了struts2-json-plugin-2.3.16.3.jar,不然struts2是不會自動將資料轉為json格式的資料的。

效果截圖:

故我們可以總結result類型為json的步驟:

  1.導入jar套件:struts2- json-plugin-2.3.7.jar  

  2.設定struts傳回的結果集視圖設定type=json

  3.設定對應action所在的package繼承自json-default

  3.設定對應action所在的package繼承自json-default

#  3.設定對應action所在的package繼承自json-default

  4.將要傳回的資料提供get方法

  5.在struts.xml中設定回傳資料的格式

對於第5步設定回傳資料的格式,可以依照自己項目的需要,去具體設置,這裡只是簡單舉例,並沒有拿複雜的數據,如果是返回一個List集合,那麼對於數據的格式可以進行如下設置:

<result>
  <!-- 设置数据的来源从某个数据得到 -->
   <!-- 过滤数据从gtmList集合中得到,且只获取集合中对象的name,跟uuid属性 -->      <param>gtmList
  <param>
    \[\d+\]\.name,
    \[\d+\]\.uuid
   
</result>
###上面這種方式外,還有下面這種方式###
<result>
   <!-- 一般使用这种方式 先用来源过滤action默认从整个action中获取所有的(前提是此action中没有getAction()方法)
    但是为了方便 一般不写root:action这个
    然后再用包含设置进行过滤设置
   -->    
   <param>action
   <param>
     gtmList\[\d+\]\.name,
     gtmList\[\d+\]\.uuid
   
 </result>

上面两种方式都是设置数据从gtmList集合中获取且,只获取对象的属性为name与uuid的。这里只做简单的举例,具体可自己下去深入研究。

附上json类型的Result允许指定的常用参数:

另外,除了以上两种是struts2支持的ajax外,其实如果单纯的只是可以让服务器端可以跟客户端浏览器进行数据交互,可以使用response.getWrite()这种方式。

PrintWriter printWriter =response.getWriter();
printWriter.print("success");

选择哪种方式?

对于我,如果只是对增删改功能是否成功的一个flag判断的数据,则可优先选择response.getWriter().print("xxx")与设置result类型为stream的方式,但是如果是需要返回大量对象数据,在页面接收然后进行数据展示,例如页面通过ajax请求,需要后台action返回一个list集合,则就要选择配置result类型为json的方式了。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

使用Ajax和forms实现注册用户所需功能

ajax实现动态饼图和柱形图的图文详解

以上是實作Struts2和Ajax資料交互詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
JavaScript引擎:比較實施JavaScript引擎:比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

超越瀏覽器:現實世界中的JavaScript超越瀏覽器:現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制:1.通過Node.js實現服務器端編程,適用於高並發請求處理。 2.通過ReactNative進行移動應用開發,支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制,適用於硬件交互。

使用Next.js(後端集成)構建多租戶SaaS應用程序使用Next.js(後端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序(一個Edtech應用程序),您可以做同樣的事情。 首先,什麼是多租戶SaaS應用程序? 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js(前端集成)構建多租戶SaaS應用程序如何使用Next.js(前端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript:探索網絡語言的多功能性JavaScript:探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

JavaScript的演變:當前的趨勢和未來前景JavaScript的演變:當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript:它的作用以及為什麼重要神秘的JavaScript:它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

Python還是JavaScript更好?Python還是JavaScript更好?Apr 06, 2025 am 12:14 AM

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。1.Python以简洁语法和丰富库生态著称,适用于数据分析和Web开发。2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。