Javascriptで外部URLにPOSTするには？

Javascriptで変数hogeにテキストが入っているとします。

そのテキストを外部URL（http://example.com/）にPOST送信するには、どういうコードを書けば良いでしょうか。

フォームを使わずにリンクをクリックするだけでやりたいのですが可能でしょうか。

ご教授よろしくお願いいたします。

行動規範の内容に同意します

回答3件

ベストアンサー

ポストするだけなら、例えば jQuery を使って次のようにできます。

javascrupt
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title></title>
6</head>
7<body>
8<a href="#" id="post">post</a>
9<script src="//code.jquery.com/jquery-1.11.3.js"></script>
10<script>
11$(function(){
12    $('#post').on('click', function(){
13        var hoge = "this is text";
14        $.ajax({
15            url: 'http://example.com/',
16            method: 'post',
17            data: hoge
18        })
19    })
20})
21</script>
22</body>
23</html>

jQuery の $.ajax() はクロスオリジンかどうかを自動的に判断して、クロスオリジンならカスタムヘッダ X-Requested-With を付けないという特徴があるので（というか、同一オリジンの場合に jQuery はわざわざカスタムヘッダを付けているのですが）、自分で余計なカスタムヘッダをつけたりコンテントタイプを弄ったりしなければ CORS のプリフライトリクエストが飛ぶことはありません。

ただし、この方法でポストすることはできますが、JavaScript からレスポンスにアクセスできません（サーバが Access-Control-Allow-Origin のようなレスポンスヘッダを返すなら別です）。

投稿2015/07/29 04:39

編集2015/07/29 05:23

ngyuki

総合スコア4516

coinbura

2015/07/29 13:43

「レスポンスにアクセス」の意味がよくわかりませんでしたが（もしかして、301とか404とかの事？）、とりあえずは解決しました。ありがとうございました♪

ngyuki

2015/07/29 15:19

（半分ネタのつもりで回答したとは口が裂けても言えない）レスポンスにアクセスできない、というのは、レスポンスコードは元より、レスポンスボディにもアクセスできないので、サーバがどのような応答を返したかを JavaScript 側からは一切知ることができない、ということです。例えば、サーバが JSON を返す仕様だったとしても、その JSON を JavaScript から得ることはできません。

行動規範の内容に同意します

こんにちは

値の受け渡しをするには、formは必須だと思います。
隠し項目を設けてそこに変数の値をセットし、サブミットしてはいかがでしょうか？

JavaScript
1   var hoge="テキスト";
2	function submit(){
3    document.sampleForm.hoge.value=hoge;
4    document.sampleForm.submit();
5	}
6

HTML
1<a href="javascript:submit();">リンク</a>
2<form name="sampleForm" action="外部URL（例：http://example.com/）" method="post">
3<input type="hidden" name="hoge" value="">
4</form>

POSTでなくGETでもいいのであれば、URLをJavaScriptで組み立ててはいかがでしょうか？

以上。よろしくお願いいたします。

投稿2015/07/29 04:34

編集2015/07/29 04:36