• ベストアンサー
  • 困ってます

formを利用した「GET」methodでの送信について

  • 質問No.3701296
  • 閲覧数179
  • ありがとう数2
  • 回答数2

お礼率 83% (25/30)

formを利用した「POST」methodは使わずに、「GET」で送信すべく
サンプルソースで試しているのですが、どうも動きがおかしいので
お尋ねします。

下記にそのサンプルソースをまとめていますが
これでそのまま何か適当にテキストボックスに文字を入れて「検索」を
クリックしますと・・・

ブラウザのURLは http://~~~test_form.html?menu=srch&scat=1&swrd=入れた文字
 ..のようにならないといけない、と思うのですが。

実際は
http://~~~form_test.html?serch_cat=1&srch_word=入れた文字&srch_exec=%8C%9F%8D%F5
 ..のようになってしまいます。

いろいろテストして見ますと、「com error」が出ますので、何かやり方を
間違えているか、あるいは全く大きな勘違いがあるかもわかりません。

どなたかご存知の方がいらっしゃいましたら、よろしくご教授のほど
お願い致します。



//--- サンプルソース(form_test.html)----------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>test</title>
<script type="text/javascript"><!--
function sock_gput_req(sdata1){
 var radio_val = chk_radio();
 var sword = document.getElementById('srch_word').value;
 php_id = sdata1+'&scat='+radio_val+'&swrd='+sword;

 //document.getElementById('result').innerHTML = 'para='+php_id;

 var req = createXMLHttp();
 if (req==null){
   return;
}

req.onreadystatechange = function(){
 handleHttpEvent(req);
}

//window.alert("com get_sub !! "+php_id);

sendreq(req,php_id);
}

function chk_radio() {
 for(i=0; i<document.all.serch_cat.length; i++){
  if(document.all.serch_cat[i].checked){
    return document.all.serch_cat[i].value;
  }
 }
 return -1;
}

function handleHttpEvent(req){
 if (req.readyState == 4) {
  //window.alert(req.responseText); // responce data
  if (req.status == 200) {
    //window.alert(req.responseText); // responce data
  } else {
    window.alert("com error !!");
  }
 }
}

function sendreq(req,php_id){
 req.open("GET",php_id,false);
 req.send("");
}

function createXMLHttp() {
 if (window.XMLHttpRequest) {
   return new XMLHttpRequest();
 } else if (window.ActiveXObject) {
  try {
    return new ActiveXObject("MSXML2.XMLHTTP");
  } catch (e) {
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
 return null;
}
// --></script>
</HEAD>
<BODY>

<FORM name="srchform" METHOD="GET" onsubmit="sock_gput_req('test_form.html?menu=srch');">
<TABLE BORDER="0" cellspacing=2 cellpadding=0 width=90%>
<TR><TD>【ワード検索】</TD></TR></TABLE>
<div align=left>■検索ワード</div>
<input type="radio" name="serch_cat" value="1" checked>カテゴリーA 
<input type="radio" name="serch_cat" value="2">カテゴリーB<br>
<TABLE BORDER="0" cellspacing=0 cellpadding=3>
<TR><TD>
<INPUT TYPE="TEXT" NAME="srch_word" SIZE="35" value="">
</TD><TD >
<INPUT TYPE="SUBMIT" NAME="srch_exec" VALUE="検索">
</TD></TR>
</TABLE>
</FORM>

<div id="result"></div>

</BODY>
</html>

質問者が選んだベストアンサー

  • 回答No.1
  • ベストアンサー

ベストアンサー率 63% (239/379)

Ajaxの方のURLはお望みのものになってますよ。
非同期に取得表示したいのならサブミットする必要ないのでは?

onsubmit="sock_gput_req('test_form.html?menu=srch');return false;"
 or
<input type="button" value="検索" onclick="sock_gput_req('test_form.php?menu=srch');">
補足コメント
moo9999

お礼率 83% (25/30)

それと、一部補足させてください。

TEXTに入ります文字は、かな・漢字などが入りますので、encodeURIで変換したいと
思っていますので、Javascriptの中で処理ができればと思っています。
(今は、自動的に <form>~</form>のなかの既定項目がそのまま出力されるような状態になっています)
投稿日時:2008/01/22 00:05
お礼コメント
moo9999

お礼率 83% (25/30)

早速のご回答ありがとうございます。

教えていただきました内容を組み込んでみましたが結果は同じでした。
(やり方が違っているかも知れません、すみません)

一応、「?menu=srch」のような引数を付加したいのですが、今の所できていません。
 http://~~~test_form.html?menu=srch&scat=1&swrd=入れた文字
                   ==========

それと、本来 PHP+Javascript(Ajax)での内容なのですが、サンプルソースに
した時点でPHPのソースは無く、結果カテ違いになっていました、すみません。

再度、よろしくお願い致します。

-------------------------------------------------------------------------
テスト-1
<FORM name="srchform" METHOD="GET" onsubmit="sock_gput_req('test_form.html?menu=srch');return false;">
   | 略
<INPUT TYPE="SUBMIT" NAME="srch_exec" VALUE="検索">

テスト-2
<FORM name="srchform" METHOD="GET">
   | 略
<input type="button" value="検索" onclick="sock_gput_req('test_form.php?menu=srch');">
投稿日時:2008/01/21 23:45

その他の回答 (全1件)

  • 回答No.2

ベストアンサー率 63% (239/379)

"com error !!" ならリクエスト失敗です。
同階層にtest_form.htmlはありますか?
(test_form.phpで確認したのでtypoしてます。)

表示させるなら
//window.alert(req.responseText); を
document.getElementById('result').innerHTML = req.responseText; 等に。

test_form.htmlというのがPHPなら、encodeURIでは失敗すると思います。
参考URLの独自関数を使うとよいです。
補足コメント
moo9999

お礼率 83% (25/30)

ありがとうございます。

いろいろと試していましたら、どうも「location.href」で外部のPGを
起動できそうだと言う事が分かり試してみましたら、ばっちりうまく行きました。

終わってみればなんとやらで、Ajaxを持ち出しての面倒なことは必要なかった
わけですね。・・・お恥ずかしい。

いろいろと、試行錯誤しましたが何とかうまくまとまりそうです。
ありがとうございました。
これからも、よろしくお願い致します。


P.S. 一応、最後にまとめました(少し手抜きですが)ソースを載せておきます。


-------------------------------------------------------------
<?php
$menu = $_GET['menu'];
$srch_word = $_GET['swrd'];

echo <<<EOD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>test</title>
<script type="text/javascript"><!--
function sock_gput_req(sdata1){
var radio_val = chk_radio();
var sword = document.getElementById('srch_word').value;
php_id = sdata1+'&scat='+radio_val+'&swrd='+sword;

document.getElementById('result').innerHTML = 'para='+php_id;

location.href = php_id;//***** 追加 *****
}

function chk_radio() {
for(i=0; i<document.all.serch_cat.length; i++){
if(document.all.serch_cat[i].checked){
return document.all.serch_cat[i].value;
}
}
return -1;
}

// --></script>
</HEAD>
<BODY>

<FORM name="srchform" METHOD="GET" onsubmit="sock_gput_req('test_form.php?menu=srch');return false;">
<TABLE BORDER="0" cellspacing=2 cellpadding=0 width=90%>
<TR><TD>【ワード検索】</TD></TR></TABLE>
<div align=left>■検索ワード</div>
<!--
<INPUT TYPE="hidden" NAME="menu" VALUE="srch">
-->
<input type="radio" name="serch_cat" value="1" checked>カテゴリーA 
<input type="radio" name="serch_cat" value="2">カテゴリーB<br>
<TABLE BORDER="0" cellspacing=0 cellpadding=3>
<TR><TD>
<INPUT TYPE="TEXT" NAME="srch_word" SIZE="35" value="$srch_word">
</TD><TD >

<INPUT TYPE="SUBMIT" NAME="srch_exec" VALUE="検索">

</TD></TR>
</TABLE>
</FORM>

<div id="result"></div>

</BODY>
</html>
EOD;
?>
投稿日時:2008/01/22 09:09
お礼コメント
moo9999

お礼率 83% (25/30)

ありがとうございます。

PHPを使った状態にしていなかったので、マウスクリックでの起動と
ブラウザからの起動がゴチャまぜになっていて、それでエラーが
出ていたようです。

これらをまとめましてテストした結果、以下の組み合わせで欲しいデータは出てきたようです。
(ついでに、htmlからphpにして最終に近い形にしています)

<FORM name="srchform" METHOD="GET" onsubmit="sock_gput_req('test_form.php?menu=srch');return false;">
   | 略
<INPUT TYPE="SUBMIT" NAME="srch_exec" VALUE="検索">


出力文字  >>>  test_form.php?menu=srch&scat=1&swrd=入力した文字

ただ、一応出力されているのですがその文字列がブラウザのURLアドレス部に
表示されないのですが、何か処理がまだ足りないのでしょうか、
それとも、URLアドレス部への出力は出来ないのでしょうか?

そのため、Javascriptの中だけで処理が終わって受けのプログラムで受け取れません。


後、「encodeURI」の件ですが..
PHP5.0では「urldecode」が使えるようですので、Javascriptの
「encodeURI」を使った通信でも問題無いと思われます。
(以前、別のプログラムで経験があります)


お手間お掛けしますが、よろしくお願いします。
投稿日時:2008/01/22 08:34
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ページ先頭へ