読者です 読者をやめる 読者になる 読者になる

Slim3でjsonpレスポンスを返す。

GAE/J

 昨日に引き続き、Slim3で今度はjsonpレスポンスを返す機能を実装してみました。今回はcubbyのソース(Json.java)を参考にさせて頂きました。ありがとうございます。それにしても、jqueryは簡単に色々できますね。素晴らしい。

 追記
 Slim3でjson/jsonpレスポンスを返すJsonController - ken’s room 〜技術探求のメモ〜

index.jsp

<%@page pageEncoding="UTF-8" isELIgnored="false"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>twitter Index</title>
<link rel="stylesheet" type="text/css" href="/css/global.css" />
<script src="/js/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("#hello").click(function(){
        getTreeNodes();
    });
});

function getTreeNodes() {
    $("#message").text("Loading...");

    $.ajax({
        dataType: "jsonp",
        data: {},
        url: "http://localhost:8888/twitter/hello",
        success: function (data) {
            $("#message").empty();
            $.each(data.childNodesList, function(i,item){
                $("<li/>") 
                    .attr("id", "node_" + item.id)
                    .append(item.name) 
                    .appendTo("#message");
            });
        }
    });
}
</script>
</head>
<body>
<p>Hello twitter Index !!!</p>
<input type="button" value="hello" id="hello" />
<div id="message"></div>
</body>
</html>

 jqueryajaxによる呼び出しは第2回 jQueryによるAjax実装:jQueryではじめるAjax|gihyo.jp … 技術評論社を参考にしました。