2279


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

ajax.html

[code]

    <!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>
    
[/code]

receive.php

[code]

    <?php 
        var_dump($_POST);
    ?>
    
[/code]


CC BY-SA 3.0
2014-12-20T15:45:33.993
2272
2014-12-20T16:41:52.590
2014-12-20T16:41:52.590
3313
5330
question
javascript
JavascriptをつかったAjaxのPost処理


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

[code]

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

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

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

[code]

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

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

[code]

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

php側でも

[code]

    echo file_get_contents('php://input');
    
[/code]

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


CC BY-SA 3.0
2014-12-20T16:12:42.960
2279
2014-12-20T16:21:26.540
2014-12-20T16:21:26.540
728
728
2272
answer