3

Ajax初心者です。JQueryからAjaxを始めるとどうしてもおまじない感がでてしまい、ビハインドロジックを理解できないと思っているため、Ajaxをjavascriptで書いてみています。jsonでファイルを渡しているのですが、うまくいきません。(ステータスは200でPOSTで送信できているのですが、receive.php側の$_POSTに何も入っていません。。)もしよろしければご指導いただければと思います。

ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax post</title>
</head>
<body>
    <input id="one" type="text" value="aaa">
    <input id="two" type="text">
    <input id="three" type="text">
    <button id="submit">送信</button>
    <span id="output"></span>
<script>
    var button = document.getElementById('submit');

    button.addEventListener('click', function(){
    var one = document.getElementById('one').value;
    var two = document.getElementById('two').value;
    var three = document.getElementById('three').value;
    console.log({one:one, two:two, three:three});

    var text = JSON.stringify({one:one, two:two, three:three});
    var xhr = new XMLHttpRequest();
    if((xhr.status == 200) && (xhr.readyState == 4)){
        console.log(xhr.responseText);
    }

    xhr.open('post', 'receive.php');
    xhr.send(text);
    },false);

</script>
</body>
</html>

receive.php

<?php 
    var_dump($_POST);
?>

1 件の回答 1

8

取得の部分は以下の様になりますね。

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

php側で$_POSTで取得するのであれば、formとしてPOSTするとよいと思います。 リクエストヘッダを設定するには key=value形式の文字列の配列を指定し、それをsendします。

本当はもう少しきっちりエンコードした方がいいでしょうが、簡単には以下の様にすれば送信できると思います。

xhr.open('post', 'receive.php');
xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
var params=[];
params.push( "json="+text );
xhr.send(params);

jsonのまま送る場合は、リクエストヘッダを変えて送信することになりますが、

xhr.setRequestHeader( 'Content-Type', "application/json;charset=UTF-8" );
xhr.send(text);

php側でも

echo file_get_contents('php://input');

のように、読み取る必要があります。
php側からjsonとして返したいならjson用のレスポンスヘッダも必要です。

1
  • 早急の回答、大変ありがとうございます! 全部、動かすことができました。 xhr.onreadystatechangeの部分は僕の単純なミスでした。php側にポストで渡すときは、基本はフォーム形式にそろえればいいんですね・・・!大変勉強になりました。ありがとうございます! Commented 2014年12月21日 0:41

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。