wake-up-neo.net

JSON-Daten von Javascript an PHP senden?

Wie kann ich JSON-Daten von Javascript im Browser an einen Server senden und PHP dort analysieren lassen?

42
kermit

Ich habe hier viele Informationen erhalten, also wollte ich eine Lösung posten, die ich entdeckt habe.

Das Problem: JSON-Daten von Javascript im Browser auf den Server übertragen und mit PHP erfolgreich analysiert werden.

Umgebung: Javascript in einem Browser (Firefox) unter Windows. LAMP-Server als Remote-Server: PHP 5.3.2 unter Ubuntu.

Was funktioniert (Version 1):
1) JSON ist nur Text. Text in einem bestimmten Format, aber nur eine Textzeichenfolge. 

2) In Javascript gibt mir var str_json = JSON.stringify(myObject) die JSON-Zeichenfolge.

3) Ich verwende das AJAX XMLHttpRequest-Objekt in Javascript, um Daten an den Server zu senden:

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) Auf dem Server PHP Code zum Lesen der JSON-Zeichenfolge:

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

Dies liest die Rohdaten POST. $str_json enthält jetzt die genaue JSON-Zeichenfolge des Browsers.

Was funktioniert (Version 2):
1) Wenn ich den Anforderungsheader "application/x-www-form-urlencoded" verwenden möchte, muss ich eine standardmäßige POST - Zeichenfolge von "x=y&a=b[etc]" erstellen, damit PHP sie abrufen und in das $_POST-Assoziationsarray einfügen kann. Also in Javascript im Browser:

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

PHP kann nun das $ _POST-Array auffüllen, wenn ich str_json wie in Version 1 oben über AJAX/XMLHttpRequest sende. 

Durch Anzeigen des Inhalts von $_POST['json_string'] wird die JSON-Zeichenfolge angezeigt. Wenn Sie json_decode () für das $ _POST-Array-Element mit dem json-String verwenden, werden diese Daten korrekt decodiert und in ein Array/Objekt eingefügt.

Die Falle, auf die ich gestoßen bin:
Anfangs versuchte ich, den JSON-String mit dem Header der Anwendung/x-www-form-urlencoded zu senden, und versuchte dann, ihn sofort aus dem $ _POST-Array in PHP auszulesen. Das $ _POST-Array war immer leer. Das liegt daran, dass Daten in der Form yval = xval & [rinse_and_repeat] erwartet werden. Es fand keine solchen Daten, nur die JSON-Zeichenfolge, und warf sie einfach weg. Ich habe die Anforderungsheader geprüft und die POST - Daten wurden korrekt gesendet.

Ebenso kann ich, wenn ich den application/json-Header verwende, nicht mehr über das Array $ _POST auf die gesendeten Daten zugreifen. Wenn Sie den Content-Type-Header application/json verwenden möchten, müssen Sie in PHP über die Eingabe von php: // auf die rohen POST -Daten zugreifen, nicht mit $ _POST.

Verweise:
1) Zugriff auf POST -Daten in PHP: Zugriff auf POST -Daten in PHP?
2) Details zum application/json-Typ mit einigen Beispielobjekten, die in JSON-Zeichenfolgen konvertiert und an den Server gesendet werden können: http://www.ietf.org/rfc/rfc4627.txt

53
kermit

Javascript-Datei mit jQuery (Reiniger, aber Bibliotheksaufwand):

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

PHP-Datei (process.php):

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

Beachten Sie Folgendes, wenn Sie in Ihrem Javascript Rückruffunktionen verwenden:

$.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);
});

Sie müssen in Ihrer PHP -Datei ein JSON-Objekt (in Javascript-Formatierung) zurückgeben, um in Ihrem Javascript-Code ein Ergebnis zu erzielen. Mindestrückgabe/Druck:

print('{}');

Siehe Ajax-Anfragerückgabe 200 OK, aber Fehlerereignis wird anstelle von Erfolg ausgelöst

Obwohl es etwas ernsthafter ist, sollten Sie einen richtigen Header explizit mit dem entsprechenden Antwortcode zurückschicken.

15
Cyrille

Einfaches Beispiel zu JavaScript für HTML-Eingabefelder (Senden an Server-JSON, Analysieren von JSON in PHP und Senden an Client) mit AJAX:

<!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-Datei 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>
 ';
?>
5
Aconic

PHP hat eine eingebaute Funktion namens json_decode (). Übergeben Sie einfach den JSON-String in diese Funktion, und es wird in den entsprechenden String, Array oder Objekt von PHP konvertiert.

Um es als eine Zeichenfolge von Javascript zu übergeben, können Sie es mit JSON konvertieren

JSON.stringify(object);

oder eine Bibliothek wie Prototype

4
John

Es gibt 3 relevante Möglichkeiten, Daten von Client-Seite (HTML, Javascript, Vbscript .. etc) an Server-Seite (PHP, ASP, JSP usw.) zu senden.

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

HTML-Formular-Buchungsanfrage (GET oder POST)

Dies ist die am häufigsten verwendete Methode, durch die wir mehr Daten senden können

AJAX

Dies ist eine asynchrone Methode und dies muss auf sichere Weise funktionieren, auch hier können wir mehr Daten senden.

Cookie

Dies ist eine nette Methode, um kleine Mengen unempfindlicher Daten zu verwenden. Dies ist der beste Weg, um mit Daten zu arbeiten.

In Ihrem Fall können Sie HTML-Formular oder AJAX bevorzugen. Bevor Sie jedoch an den Server senden, überprüfen Sie Ihren Json selbst oder verwenden Sie einen Link wie http://jsonlint.com/ .

Wenn Sie ein Json-Objekt haben, konvertieren Sie es mithilfe von JSON.stringify (Objekt) in einen String.

verwenden Sie JSON.stringify (yourObj) oder Object.toJSON (yourObj), um prototype.js zu verwenden. Senden Sie es dann mit dem gewünschten Code (ajax oder submit) und verwenden Sie wie vorgeschlagen json_decode ( http: // www.php.net/manual/de/function.json-decode.php ) um es in php zu analysieren. Und dann können Sie es als Array verwenden.

2
khael

Ich empfehle die Methode 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

Sie können ein Objekt leicht in einen urlencodierten String konvertieren

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&