【Javascript】XMLHttpRequestで配列をPOSTする

基本(配列以外をPOSTする場合)

FormDataオブジェクトを作り、第一引数にname、第二引数に値を指定してappend。

XMLHttpRequestのsendメソッドでFormDataを送信すればOK。



var data="hogehoge";
var datas = new FormData();
datas.append("senddata",  data);

xhr.open("POST","one_data_post.php");
xhr.send(datas);

xhr.onreadystatechange = function(){
  if(xhr.readyState == 4 && xhr.status == 200){
    alert("送信できた");
  }
}

受け取り側のPHPは下のような感じで。

$receive_data = $_POST["senddata"];

echo "送られたデータ:".$receive_data;

配列の場合

nameを{名前}[]にして順次appendする。

var data = ["hoge1", "hoge2", "hoge3"];
var datas = new FormData();

for(let i=0;i<data.length;i++){
    datas.append("senddata[]",  data[i]);
}

xhr.open("POST","array_data_post.php");
xhr.send(datas);

xhr.onreadystatechange = function(){
  if(xhr.readyState == 4 && xhr.status == 200){
    alert("配列も送信できた");
  }
}

こうするとPHP側だと$_POST[{名前}]がarrayになっているので、そこからデータを取り出せばよい。

$receive_data = $_POST["senddata"]; //これは配列

foreach($receive_data as $data){
　echo "送られたデータ:".$data.","; //hoge1, hoge2, hoge3
}

Javascript

Posted by shomin