JS側からPHP側に値を渡したい

Question

JS側の値をPHP側に渡したいのですが

var num = 100;
var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
  if(xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
}

xhr.open('POST','xxx.php',true);
xhr.send(num);

<?php
echo $_POST['num'];
?>

上記の書き方ではうまくいかないのですが問題点がわからない状態です。
どなたかご教授お願いいたします。

Answer 1

ライブラリをつかわないのですね？
細かく言うと色々あるのですが、とりあえずこう修正してください

var num = 100;
var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
  if(xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
}
xhr.open('POST','xxx.php',true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//ヘッダを追加
xhr.send("num="+num);//パラメータ名をつけて送る

Comments

[SmithTarou]

素早い回答ありがとうございました。
リクエストヘッダ、パラメータ名が原因だったようで無事解決できました。

Answer 2

解決していますが、パラメータはFormData オブジェクトを利用すると操作がしやすくなると思います。

【FormData オブジェクトの利用 - ウェブデベロッパーガイド | MDN】
https://developer.mozilla.org/ja/docs/Web/Guide/Using_FormData_Objects

Answer 3

ブラウザ側の問題なのかサーバー側の問題なのか切り分けはついているのでしょうか？

まずはブラウザからどのような要求が出て行っているかを調べるのが問題切り分けの第一歩になると思います。それには、個人的には、Fiddler を使うのがお勧めです。

Fiddler はもともと IE 用のツールらしいですが、Firefox と Chrome にも使えます。ただ、Firefox の最新版では FiddlerHook が使えないようで、自分でプロキシの設定をする必要がありますが。詳しくは以下の記事を見てください。

Fiddler のお勧め
http://surferonwww.info/BlogEngine/post/2011/05/25/Recommendation-of-Fiddler.aspx