Takahiro Octopress Blog

-1から始める情弱プログラミング

Swift ExpressでAjax通信してみよう！

Swift ExpressでPOSTリクエスト投げてみよう！

さて、本日はSwift Expressの続きを試してみます。
前回はインストール方法とデフォルト画面の表示までを紹介しましたが、
今回はAjax通信によるPOSTリクエストを投げてみたいと思います。

サーバサイドの対応

まずは、サーバサイドの準備です。
main.swiftを修正しましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import Express

let app = express()

app.views.register(StencilViewEngine())
<!-- ここを追加 -->
app.views.register(JsonView())

app.get("/assets/:file+", action: StaticAction(path: "public", param:"file"))

app.get("/") { (request:Request<AnyContent>)->Action<AnyContent> in
    return Action<AnyContent>.render("index", context: ["hello": "Hello,", "swift": "Swift", "express": "Express!"])
}

<!-- ここを追加 -->
app.post("/:param") { (request:Request<AnyContent>)->Action<AnyContent> in
    let response = ["status": "ok", "description": "Post Request Succesfully"]
      return Action.render(JsonView.name, context: response)
}

app.listen(9999).onSuccess { server in
    print("Express was successfully launched on port", server.port)
}

app.run()

app.views.register(JsonView())を追加することで、JSON形式のデータを返却できるようになります。
また、返却レスポンスはdictionary型で書けばOKなようです。

クライアントサイドの対応

続いて、クライアントサイドの準備です。
手っ取り早くjQuery使いましょう。
こちらのページから最新のjQueryをダウンロードしてきます。

そして、index.jsをさくっと作っちゃいましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(function() {

  $("#touch").on("click", function() {
      // Ajax通信
      ajax();
  });

  function ajax() {
      $.ajax({
          type: "POST",
          url: "http://localhost:9999/1",
          dataType: "json"
      }).done(function(data) {
          alert(data.status + "\n" + data.description);
      }).fail(function(data) {
          alert("error!!");
      });
  }
});

これらjsファイルを読み込みます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// index.stencil
<html>
  <head>
      <title>  </title>
      <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:700italic,700' rel='stylesheet' type='text/css'>
      <link href='/assets/css/main.css' rel='stylesheet' type='text/css'>
  </head>
  <body>
      <img class="logo" src="/assets/logo.png"/>
      <h1> <i><span class="swift"></span> </i></h1>
      <div id="touch">ここをタッチ！！</div>

      <script src="/assets/js/jquery-3.1.0.min.js"></script>
      <script src="/assets/js/index.js"></script>
  </body>
</html>

これだけで下図のようにPOSTリクエストが通りました。

POSTリクエスト

というところで本日はここまで。

Comments