web-dev-qa-db-ja.com

JSONデータをJavascriptからPHPに送信しますか？

ブラウザ内のJavascriptからサーバーにJSONデータを送信し、そこでPHP解析するようにするにはどうすればよいですか？

phpjavascriptajaxjson
44
kermit

ここで多くの情報を得たので、発見した解決策を投稿したいと思いました。

問題： ブラウザ上のJavascriptからサーバーにJSONデータを取得し、PHPで正常に解析します。

環境： Windowsのブラウザ（Firefox）のJavascript。リモートサーバーとしてのLAMPサーバー：UbuntuのPHP 5.3.2。

動作するもの（バージョン1）：
1）JSONは単なるテキストです。特定の形式のテキスト、ただしテキスト文字列。

2）Javascriptでは、var str_json = JSON.stringify(myObject)はJSON文字列を提供します。

3）JavascriptのAJAX XMLHttpRequestオブジェクトを使用して、サーバーにデータを送信します。

request= new XMLHttpRequest()
request.open("POST", "JSON_Handler.php", true)
request.setRequestHeader("Content-type", "application/json")
request.send(str_json)
[... code to display response ...]

4）サーバーで、JSON文字列を読み取るPHPコード：

$str_json = file_get_contents('php://input');

これは、未加工のPOSTデータを読み取ります。 $str_jsonには、ブラウザからの正確なJSON文字列が含まれるようになりました。

動作するもの（バージョン2）：
1）"application/x-www-form-urlencoded"リクエストヘッダーを使用する場合は、POSTのときに"x=y&a=b[etc]"の標準PHP文字列を作成する必要があります_取得し、$_POST連想配列に配置できます。したがって、ブラウザのJavascriptで：

var str_json = "json_string=" + (JSON.stringify(myObject))

上記のバージョン1のように、AJAX/XMLHttpRequestを介してstr_jsonを送信すると、PHPが$ _POST配列を設定できるようになります。

$_POST['json_string']の内容を表示すると、JSON文字列が表示されます。 json文字列を含む$ _POST配列要素でjson_decode（）を使用すると、そのデータが正しくデコードされ、配列/オブジェクトに配置されます。

私が遭遇した落とし穴：
最初に、application/x-www-form-urlencodedのヘッダーを含むJSON文字列を送信してから、PHPの$ _POST配列からすぐに読み取ろうとしました。 $ _POST配列は常に空でした。これは、yval = xval＆[rinse_and_repeat]の形式のデータを予期しているためです。そのようなデータは検出されず、JSON文字列のみが検出され、単純に破棄されました。リクエストヘッダーを調べたところ、POSTデータが正しく送信されていました。

同様に、application/jsonヘッダーを使用すると、送信されたデータに$ _POST配列を介して再びアクセスできなくなります。 application/json content-typeヘッダーを使用する場合は、$ _ POSTではなく、php：// inputを介してPHPの未加工のPOSTデータにアクセスする必要があります。

参照：
1）PHPでPOSTデータにアクセスする方法： PHPでPOSTデータにアクセスする方法？
2）application/jsonタイプの詳細。JSON文字列に変換してサーバーに送信できるサンプルオブジェクトがいくつかあります。 http://www.ietf.org/rfc/rfc4627。 txt

55
kermit

JQueryを使用したJavascriptファイル（よりクリーンですがライブラリのオーバーヘッド）：

$.ajax({
    type: 'POST',
    url: 'process.php',
    data: {json: JSON.stringify(json_data)},
    dataType: 'json'
});

PHPファイル（process.php）：

directions = json_decode($_POST['json']);
var_dump(directions);

Javascriptでコールバック関数を使用する場合：

$.ajax({
    type: 'POST',
    url: 'process.php',
    data: {json: JSON.stringify(json_data)},
    dataType: 'json'
})
.done( function( data ) {
    console.log('done');
    console.log(data);
})
.fail( function( data ) {
    console.log('fail');
    console.log(data);
});

Javascriptコードで「完了/成功」の結果を得るには、PHPファイルで、JSONオブジェクトを（javascriptフォーマットで）返す必要があります。少なくともreturn/print：

print('{}');

Ajax要求は200 OKを返しますが、成功ではなくエラーイベントが発生します を参照してください

もう少し深刻な場合は、適切なヘッダーを適切な応答コードとともに明示的に返送する必要があります。

16
Cyrille

AJAXを使用したHTML入力フィールドのJavaScriptの簡単な例（サーバーJSONへの送信、PHPでのJSONの解析、およびクライアントへの返信））：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<body>
<div align="center">
    <label for="LName">Last Name</label>
    <input type="text" class="form-control" name="LName" id="LName" maxlength="15"
           placeholder="Last name"/>
</div>
<br/>

<div align="center">
    <label for="Age">Age</label>
    <input type="text" class="form-control" name="Age" id="Age" maxlength="3"
           placeholder="Age"/>
</div>
<br/>

<div align="center">
    <button type="submit" name="submit_show" id="submit_show" value="show" onclick="actionSend()">Show
    </button>
</div>

<div id="result">
</div>

<script>
    var xmlhttp;

    function actionSend() {
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        var values = $("input").map(function () {
            return $(this).val();
        }).get();
        var myJsonString = JSON.stringify(values);
        xmlhttp.onreadystatechange = respond;
        xmlhttp.open("POST", "ajax-test.php", true);
        xmlhttp.send(myJsonString);
    }

    function respond() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('result').innerHTML = xmlhttp.responseText;
        }
    }

</script>

</body>
</html>

PHPファイルajax-test.php：

<?php

$str_json = file_get_contents('php://input'); //($_POST doesn't work here)
$response = json_decode($str_json, true); // decoding received JSON to array

$lName = $response[0];
$age = $response[1];

echo '
<div align="center">
<h5> Received data: </h5>
<table border="1" style="border-collapse: collapse;">
 <tr> <th> First Name</th> <th> Age</th> </tr>
 <tr>
 <td> <center> '.$lName.'<center></td>
 <td> <center> '.$age.'</center></td>
 </tr>
 </table></div>
 ';
?>
6
Aconic

PHPにはjson_decode（）という組み込み関数があります。 JSON文字列をこの関数に渡すだけで、PHP同等の文字列、配列、またはオブジェクトに変換されます。

Javascriptから文字列として渡すには、次を使用してJSONに変換できます。

JSON.stringify(object);

またはPrototypeなどのライブラリ

4
John

クライアント側（HTML、Javascript、Vbscriptなど）からサーバー側（PHP、ASP、JSPなど）にデータを送信するための3つの関連する方法があります。

1. HTML form Posting Request (GET or POST).
2. AJAX (This also comes under GET and POST)
3. Cookie

HTMLフォームの投稿リクエスト（GETまたはPOST）

これは最も一般的に使用される方法であり、この方法でより多くのデータを送信できます

[〜＃〜] ajax [〜＃〜]

これは非同期メソッドであり、安全な方法で動作する必要があります。ここでは、より多くのデータを送信することもできます。

Cookie

これは、少量の機密性の低いデータを使用する良い方法です。これは、データのビットを操作するための最良の方法です。

あなたの場合、HTMLフォームポストまたはAJAXを使用できます。ただし、サーバーに送信する前に、自分でJSONを検証するか、 http://jsonlint.com/ のようなリンクを使用してください

JSON.stringify（object）を使用してJSONオブジェクトをStringに変換する場合、JSONストリングを使用する場合は、そのまま送信します。

4
Robin Michael Poothurai

jSON.stringify（yourObj）またはObject.toJSON（yourObj）を使用するのは、prototype.jsを使用するためのもので、その後、希望するもの、ajaxまたはsubmitを使用して送信し、提案どおりjson_decode（ http： //www.php.net/manual/en/function.json-decode.php ）phpで解析します。そして、それを配列として使用できます。

2
khael

jquery.post（） メソッドをお勧めします。

2
ravi404
    <html>
<script type="text/javascript">
var myJSONObject = {"bindings": 11};
alert(myJSONObject);

var stringJson =JSON.stringify(myJSONObject);
alert(stringJson);
</script>
</html>
1
jianfeng

オブジェクトをurlencoded文字列に簡単に変換できます。

function objToUrlEncode(obj, keys) {
    let str = "";
    keys = keys || [];
    for (let key in obj) {
        keys.Push(key);
        if (typeof (obj[key]) === 'object') {
            str += objToUrlEncode(obj[key], keys);
        } else {
            for (let i in keys) {
                if (i == 0) str += keys[0];
                else str += `[${keys[i]}]`
            }
            str += `=${obj[key]}&`;
            keys.pop();
        }
    }
    return str;
}

console.log(objToUrlEncode({ key: 'value', obj: { obj_key: 'obj_value' } }));

// key=value&obj[obj_key]=obj_value&
0
Юрий Столов