MW211 EXIT

devlog
JavaScript/POSTメソッドとGETメソッドをネストする方法
2011年09月28日
ということで前回(JavaScript/POSTメソッドとGETメソッドを切り替える方法)からの
続き(「怪獣殿下」を彷彿とさせる初の二話構成です)。

今度は、POSTメソッドの中にGETメソッドを入れる方法(をより真剣に検討)。
┌──────────────────────────────────────┐
│<form method="post" action="xxxx.php">                                      │
│  <input type="button" value="GET実行" onclick="submit2()"/>                │
│  <input type="submit" value="POST実行"/>                                   │
│</form>                                                                     │
└──────────────────────────────────────┘
までは(ほぼ)一緒です
#あ、実はsubmit2()の引数が(使わないから)こっそりなくなってる。

さて、JavaScriptの中ですが、こんな感じでどうでしょうか。
┌──────────────────────────────────────┐
│<script type="text/javascript">                                             │
│function submit2() {                                                        │
│  // 念のためこれから作るformを削除しておく(ある時だけ)                     │
│  var oldForm = document.getElementById("newForm");                         │
│  if (oldForm) {                                                            │
│    oldForm.parentNode.removeChild(oldForm);                                │
│  }                                                                         │
│  // 新規formの設定                                                         │
│  var newForm = document.createElement("form");                             │
│  newForm.setAttribute("method", "get");                                    │
│  newForm.setAttribute("action", "oooo.php");                               │
│  newForm.setAttribute("id"    , "newForm");                                │
│  newForm.style.display="none";                                             │
│  // 新規属性の設定  ※いくつでも設定可能(このブロックを繰り返す)           │
│  var newInput = document.createElement("input");                           │
│  newInput.setAttribute("name" ,name属性名);                                │
│  newInput.setAttribute("value",値);                                        │
│  newForm.appendChild(newInput);                                            │
│  // 新規formの作成とsubmit                                                 │
│  document.getElementsByTagName("body")[0].appendChild(newForm);            │
│  newForm.submit();                                                         │
│}                                                                           │
│</script>                                                                   │
└──────────────────────────────────────┘
ま、JavaScriptの中でformの世界を創ってあげる(でsubmitする)感じですね。
これなら、submitボタン(にあたるもの)がどこにあっても文句をいわれません。
ただし、formの中に定義している各属性は(そのままでは)連れてこれないので
ひとつひとつ「setAttribute()」と「appendChild()」で
(ひっぱってきては)作り直してあげる感じでしょうか。
ひっぱってくる部分は、「getElementById(ID).value」とかでできます。

GETメソッドだったら、URIを作ってしまった方がはやいという話もありますね。
ま、これだとPOSTメソッドへの流用も可能です。
分類:JavaScript
JavaScript/POSTメソッドとGETメソッドを切り替える方法
2011年09月27日
formタグはネストすることができない。
┌──────────────────────────────────────┐
│<form method="post" action="xxxx.php">                                      │
│  <form method="get" action="oooo.php">                                     │
│    <input type="submit" value="GET実行"/>                                  │
│  </form>                                                                   │
│  <input type="submit" value="POST実行"/>                                   │
│</form>                                                                     │
└──────────────────────────────────────┘
だから、上記みたいにPOSTしたい範囲の中にGETしたい範囲があるなんてのは無理。
さて、どうしよう。
ということで、まずはgetのsubmitボタンをJavaScript化して
POSTメソッドのformなのに、GETメソッドとしてsubmitさせるという方法。

まずはformのネストを潔くあきらめて、submitボタンをただのボタンにして
JavaScriptに後を託す。
┌──────────────────────────────────────┐
│<form method="post" action="xxxx.php">                                      │
│  <input type="button" value="GET実行" onclick="submit2(this.form)"/>       │
│  <input type="submit" value="POST実行"/>                                   │
│</form>                                                                     │
└──────────────────────────────────────┘
で、JavaScriptの中でこんな感じで内容を書き換えてsubmitさせてしまうのだ。
┌──────────────────────────────────────┐
│<script type="text/javascript">                                             │
│function submit2(inForm){                                                   │
│  inForm.setAttribute("method","get");                                      │
│  inForm.setAttribute("action","oooo.php");                                 │
│  inForm.submit();                                                          │
│}                                                                           │
│</script>                                                                   │
└──────────────────────────────────────┘

これは、POSTとGETが(立場が)逆の場合も可。
というか、そっちの方がおすすめ。
なぜなら大抵、POSTする内容は量が多いので、GET化(URI化)すると
URIがものすごい長文になってしまい、あまり実用的ではない。
#IE7だと「res://ieframe.dll/dnserror.htm」エラーとかになる。

ということで、明日につづく。
分類:JavaScript
前へ 1 2 3 4 5 6 7 8 9 次へ