Struts2的Ajax表單非同步方式提交表單請求

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

使用Ajax表單
通過Struts2的Ajax表單的支援，可以採用非同步方式提交表單請求。
設定表單的Ajax主題
使用Ajax表單和使用普通表單並沒有太大的不同，只需要設定表單的主題為Ajax，當提交該表單時，系統會以Ajax方式提交請求。
當然為了使用Ajax表單，必須使用 <s:head theme="ajax"/>標籤來匯入Ajax頭。
使用Ajax技術有一個重要的好處：當前頁面不會被提交，伺服器響應的是資料，而不是內容。因此，伺服器響應的資料只用於更新頁面的部分內容。
那麼，Ajax表單請求的響應用於更新哪個部分的內容，以及如何更新呢？這是通過兩個部分來控制的。
第一個部分，為了指定該表單請求的響應更新的內容，應該在Ajax表單中使用Struts2標籤來產生提交按鈕。產生提交按鈕時，可以為該按鈕指定
一個targets屬性，用來指定該表單更新的所有部分，如果需要更新多個部分，多個部分之間以英文逗號隔開。
第二部分是如何更新，在預設情況下，當伺服器響應到達時，預設將伺服器響應輸出在targets屬性指定的HTML元素中，覆蓋原來HTML元素裡的內容。
如果希望本頁面可以執行伺服器響應的JavaScript代碼，則可以為該提交按鈕指定executeScripts="true"屬性。
下面是使用Ajax表單remoteform.jsp的範例程式碼：
<%@ page contentType="text/html;charset=GBK" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>遠端資料表單 </title>
<s:head theme="ajax"/>
</head>
<body>

<div id='show' style="background-color:#bbbbbb;width:360px;height:80px">原始靜態文本 </div>

使用表單請求的傳回值來填充另一個Div。 <br/>
<s:form. id='theForm1'
cssStyle="border: 1px solid black;"
action='AjaxTest'
method='post'
theme="ajax">
<s:textfield name='data' label="請輸入您喜歡的圖書"/>
<s:submit value="修改上面的靜態文本" targets="show"/>
</s:form>

使用表單請求的傳回值來填充本Form <br/>
<s:form. id='theForm2'
cssStyle="border: 1px solid black;"
action='AjaxTest'
method='post'
theme="ajax">
<s:textfield name='data' label="請輸入您喜歡的圖書"/>
<s:submit value="修改Form本身" targets="theForm2"/>
</s:form>

直接運行遠程JavaScript(通過指定executeScripts="true") <br/>
<s:form. id='theForm3'
cssStyle="border: 1px solid black;"
action='Test3'
method='post'
theme="ajax">
<s:textfield name='data' label="請輸入您喜歡的圖書"/>
<s:submit value="執行遠程JS" executeScripts="true" targets="show"/>
</s:form>

</body>
</html>

AjaxTestAction.java代碼如下：
package lee;

import com.opensymphony.xwork2.Action;

import java.io.Serializable;

public class AjaxTestAction implements Action, Serializable {

private static int counter = 0;
private String data;

public long getServerTime() {
return System.currentTimeMillis();
}

public int getCount() {
return ++counter;
}

public String getData() {
return "伺服器提示:" + data;
}

public void setData(String data) {
this.data = data;
}

public String execute() throws Exception {
return SUCCESS;
}
}

設定檔struts.xml代碼如下：
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<package name="ajax" extends="struts-default">
<action name="AjaxTest" class="lee.AjaxTestAction">
<result>/AjaxResult.jsp </result>
</action>
<action name="Test3">
<result>/testjs.jsp </result>
</action>
</package>

</struts>

伺服器響應頁面(伺服器響應的是需要輸出的資料)：
AjaxResult.jsp代碼如下：
<%@ page contentType="text/html;charset=GBK" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
request.setAttribute("decorator", "none");
//強制瀏覽器不緩衝本頁面內容
response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
//阻止瀏覽器直接從Proxy 伺服器取得本頁面內容
response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>

伺服器計數器: <s:property value="count"/> <br>
目前時間是： <s:property value="serverTime"/> <br>
伺服器返回的提示是： <s:property value="data"/>

testjs.jsp代碼如下：
<%@ page contentType="text/html;charset=GBK" language="java" %>
<%
request.setAttribute("decorator", "none");
response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>

http://topic.csdn.net/u/20080731/10/abf33850-e24f-4910-aabb-0a58a5bedbe6.html

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More