JavaScriptを利用して POSTでページ遷移する - JavaScript

JavaScriptを利用して、POSTでページ遷移するコードを紹介します。

概要

基本はJavaScriptを利用してフォームをサブミットする方法と同じです。JavaScriptによるフォームのサブミットはこちらの記事を参照してください。

プログラム

コード

下記のHTMLファイル、Postを受け取るためのジェネリックハンドラーを作成します。

HTMLファイル

PostNavigate.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function LinkClick() {
      var now = new Date();
      document.forms.form1.datetime.value = now.getFullYear() + "-" + now.getMonth() + "-" + now.getDay()
        + " " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds(); 

      var f = document.forms["form1"];
      f.method = "POST"; 
      f.submit(); 
      return true;
    }
  </script>
</head>
<body>
  <a href="#" onclick="LinkClick();">POSTで遷移します。</a>
  
  <form name="form1" action="PostHandler.ashx" method="post">
    <input type="hidden" name="str" value="PENGUIN">
    <input type="hidden" name="datetime" value="">
  </form>

</body>
</html>

解説

  <form name="form1" action="PostHandler.ashx" method="post">
    <input type="hidden" name="str" value="PENGUIN">
    <input type="hidden" name="datetime" value="">
  </form>

上記コード部がポストされるフォームになります。今回はポストで遷移するデモのため、フォームフィールドを用意せず、hiddenフィールドで固定値と現在時刻をポストする動作にします。

リンクがクリックされると、下記の関数が実行されます。

    function LinkClick() {
      var now = new Date();
      document.forms.form1.datetime.value = now.getFullYear() + "-" + now.getMonth() + "-" + now.getDay()
        + " " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds(); 

      var f = document.forms["form1"];
      f.method = "POST"; 
      f.submit(); 
      return true;
    }

下記コードにより、"yyyy-M-d h:m:s"の時刻を表す文字列を作成します。作成した文字列は、"datetime"hiddenフィールドの値に設定します。

      var now = new Date();
      document.forms.form1.datetime.value = now.getFullYear() + "-" + now.getMonth() + "-" + now.getDay()
        + " " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();

下記コードにより、フォームの情報をポスト(サブミット)します。

      var f = document.forms["form1"];
      f.method = "POST"; 
      f.action = "PostHandler.ashx";
      f.submit();

ジェネリックハンドラー

今回ポストされる側は、ASP.NETのジェネリックハンドラーで実装しています。

PostHandler.ashx (POSTされる側)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace JavaScriptNavigation
{
  /// <summary>
  /// PostHandler の概要の説明です
  /// </summary>
  public class PostHandler : IHttpHandler
  {

    public void ProcessRequest(HttpContext context)
    {
      if (context.Request.HttpMethod == "POST") {
        context.Response.ContentType = "text/html";

        context.Response.Write("<!DOCTYPE html><html><head><metacharset=\"utf-8\" /><title></title></head><body>");

        context.Response.Write("<p>ポストを受け取りました。</p>");
        string str = context.Request.Form["str"];
        context.Response.Write(string.Format("<div>STR:{0}</div>", str));
        string datetimestr = context.Request.Form["datetime"];
        context.Response.Write(string.Format("<div>DATETIME:{0}</div>", datetimestr));

        context.Response.Write("</body></html>");

      }
      else {
        context.Response.ContentType = "text/plain";
        context.Response.Write("Hello World");
      }
    }

    public bool IsReusable
    {
      get
      {
        return false;
      }
    }
  }
}