tapestry using ajax

時間 2019-11-08

標籤 tapestry using ajax 欄目 Ajax 简体版

原文原文鏈接

請參看tapestry的官方文檔，這裏只是總結性的備忘錄。javascript

http://tapestry.apache.org/ajax-and-zones.htmlhtml

http://www.w3cschool.cc/jquery/jquery-dom-set.html
java

相關內容：jquery

t:zone組件: 決定ajax請求完成後，更新的區域。ajax

觸發ajax請求的方式：apache

1) 經過組件的的事件函數，返回局部更新的內容。json

定義t:zone組件，組件參數 id 和 t:idapp

在下面的4個組件的事件處理方法中，返回更新的內容。component中添加zone屬性，指向定義的t:zone組件。
框架

EventLink ActionLink Select Formdom

page.tml
//------------------------
<t:actionlink t:id="someLink" zone="myzone">update</t:actionlink>
<t:zone t:id="myZone" id="myzone">
    The current time is ${currentTime}
</t:zone>

page.java
//------------------------
Object onActionFromSomeLink() {
    return request.isXHR() ? myZone.getBody() : null;
}

能夠一次更新多個zone （區域的內容）

@InjectComponent
private Zone userInput;
 
@InjectComponent
private Zone helpPanel;
 
@Inject
private AjaxResponseRenderer ajaxResponseRenderer;
 
void onActionFromRegister()
{
    ajaxResponseRenderer.addRender("userInput",
        userInput).addRender("helpPanel", helpPanel);
}

2) 經過調用javascript （jquery）的ajax方式來進行調用。（和其餘框架同樣，內容之後補充）

經過動態建立EventLink, 經過jquery的ajax調用，實現局部刷新功能。

1）META-INF/modules/ajaxjson.js (必定要注意路徑，當初放在了assets/modules下面了，找不到js文件）

define(['jquery'], function($) {
    return {
        update : function(url) {
            $('#update').click(function() {
                $.getJSON(url,function(result){
                $("#address").text(result.address);
                $("#id").text(result.id);
                $("#name").text(result.name);
            });
            });
        }
    };
});

2）AjaxJson.java

public class AjaxJson {
    @Property
    @Persist
    private int count;
   
    @Property
    private int id;
    @Property
    private String name;
    @Property
    private String address;
    @Property
    private Date now; 
    @Inject
    private ComponentResources resources;
    @Inject
    private JavaScriptSupport javaScriptSupport;
    void setupRender() {
        now = new Date();
        id = 42;
        name = "xxxxx";
        address = "yyyyy";
    }
    
    @Inject 
    private Logger log;
    
    @AfterRender
    void afterRender() {
         Link link = resources.createEventLink("AjaxJson");
         javaScriptSupport.require("ajaxjson").invoke("update").with(link.toAbsoluteURI());
    }

    JSONObject onAjaxJson() {
        count++;
        JSONObject myData = new JSONObject();
        myData.put("id", 100);
        myData.put("name", "lichunhua" + count);
        myData.put("address", "dalian" + count);
        return myData;
    }
    
}

3) AjaxJson.tml

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
    xmlns:p="tapestry:parameter">
    <table>
        <tr>
            <td>id</td>
            <td id="id">${id}</td>
        </tr>
        <tr>
            <td>name</td>
            <td id="name">${name}</td>
        </tr>
        <tr>
            <td>address</td>
            <td id="address">${address}</td>
        </tr>
    </table>
    <hr />
    ${now}
    <input type="button" id="update" value="AjaxJson" />
</html>

3) eventlink返回block，實現局部更新的ajax功能

3.1）AjaxBlock.tml

<html
    xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
    xmlns:p="tapestry:parameter">
    <t:Zone t:id="br" id="br" />
    <t:block id="detail">
       ajax appliction from return Block ${count}
    </t:block>
    <hr />${now}
    <t:EventLink event="Ajax" zone="br">AjaxReturnBlock</t:EventLink>
</html>

public class AjaxBlock {
    @Inject
    private Block detail;
    
    @Property
    @Persist
    private int count;
    
    @Property
    private Date now;
    
   @Inject
    private ComponentResources componentResource;
      
   void setupRender() {
        now = new Date();
    }
 
    Block onAjax() {
        count++;
        return detail;
    }
}

1. Tapestry
2. Tapestry-Again
3. Tapestry 教程（一）
4. IE8 - Unknown Runtime Error Using innerHTML & Ajax
5. tapestry積累
6. tapestry顯示image
7. Tapestry介紹
8. (A15)Tapestry Core:Application State
9. 第三十三講：tapestry Ajax eventlink無刷新頁面
10. 第三十四講：tapestry Ajax actiontlink無刷新頁面
更多相關文章...
• AJAX 簡介 - PHP教程
• PHP - AJAX 與 PHP - PHP教程
• PHP Ajax 跨域問題最佳解決方案
• RxJava操作符（六）Utility

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。