TakzWeb:JavaScriptでPOST

JavaScriptでPOST

JavaScriptでGETによるサーバーからのレスポンス受け取りはAjaxで出来るのだが、POSTする方法がいまいち探しても見つからない。

単純にPOSTするだけなら。

_{Code:JavaScript}

document.getElementById(id).method="POST";
document.getElementById(id).submit();

でよいのだがページが移動してしまう。

ページを移動せずPOSTして、レスポンスを受け取る。 §

_Code:HTML

<form id="form_id" action="postURL" method="post">
 <input type="text" name="text" />
 <input type="submit"  class="tag">();return false" value="送信" />
</form>

_{Code:JavaScript(オブジェクト生成)}

 function XMLRequest(){
  if(this.XMLHttpRequest){ 
   return new XMLHttpRequest();
  }else {
   return new ActiveXObject("Microsoft.XMLHTTP");
 }
}

_{Code:JavaScript}

function stringPost(){
 var form=document.getElementById(form_id);
 var postString=form.text.value;
 var obj=XMLRequest();
  obj. class="sin"> function(){
   if (obj.readyState == 4 && obj.status == 200){
    req=obj.responseText;
    //ここで処理
   }
 }
 var URL='responseURL';
 obj.open("POST",URL,true);
 obj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 obj.send('string='+postString);
}

これでページを移動せずPOST出来る。

問題 §

しかし上記の方法では問題がある。 application/x-www-form-urlencoded でPOSTしているから、文字列に & や + があると意図した通り送信されない。

そこで送信文字列を　encodeURIComponent() でエンコードする必要がある。

_{Code:完成版}

function stringPost(){
 var form=document.getElementById(form_id);
 var postString=form.text.value;
 postString=encodeURIComponent(postString);//これを追加
 var obj=XMLRequest();
  obj. class="sin"> function(){
   if (obj.readyState == 4 && obj.status == 200){
    req=obj.responseText;
    //ここで処理
   }
 }
 var URL='responseURL';
 obj.open("POST",URL,true);
 obj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 obj.send('string='+postString);
}

TakzWeb

メニュー

最近の記事

JavaScriptでPOST

ページを移動せずPOSTして、レスポンスを受け取る。 §

問題 §