将JSON数据从Javascript发送到PHP？


Send JSON data from Javascript to PHP?

如何在浏览器中将JSON数据从Javascript发送到服务器并让PHP在那里解析？

相关讨论

我在这里得到了很多信息，所以我想发布一个我发现的解决方案。

问题：从浏览器上的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对象将数据发送到服务器：

1
2
3
4
5
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)在服务器上，PHP代码读取JSON字符串：

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

这将读取原始POST数据。 $str_json现在包含来自浏览器的确切JSON字符串。

什么有效(版本2)：
1)如果我想使用"application/x-www-form-urlencoded"请求标头，我需要创建一个"x=y&a=b[etc]"的标准POST字符串，这样当PHP获取它时，它可以将它放在$_POST关联数组中。所以，在浏览器中的Javascript中：

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

当我通过AJAX / XMLHttpRequest发送str_json时，PHP现在可以填充$ _POST数组，如上面的版本1所示。显示$_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标头，则必须通过php：// input而不是$ _POST访问PHP中的原始POST数据。

参考文献：
1)如何在PHP中访问POST数据：如何在PHP中访问POST数据？
2)有关application / json类型的详细信息，其中一些示例对象可以转换为JSON字符串并发送到服务器：http：//www.ietf.org/rfc/rfc4627.txt

相关讨论

使用jQuery的javascript文件(清理但库开销)：

1
2
3
4
5
6
$.ajax({
    type: 'POST',
    url: 'process.php',
    data: {json: JSON.stringify(json_data)},
    dataType: 'json'
});

PHP文件(process.php)：

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

请注意，如果您在javascript中使用回调函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.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);
});

您必须在PHP文件中返回一个JSON对象(以javascript格式)，以便在您的Javascript代码中获得"完成/成功"结果。至少返回/打印：

1
print('{}');

请参阅Ajax请求返回200 OK但是触发了错误事件而不是成功

虽然对于任何更严重的事情，您应该使用适当的响应代码明确地发回适当的标头。

相关讨论

关于JavaScript输入字段的JavaScript的简单示例(使用AJAX发送到服务器JSON，在PHP中解析JSON并发送回客户端)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!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">
<body>

    <label for="LName">Last Name</label>
    <input type="text" class="form-control" name="LName" id="LName" maxlength="15"
           placeholder="Last name"/>

<br/>


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

<br/>


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






    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;
        }
    }



</body>
</html>

PHP文件ajax-test.php：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?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 '

<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>
 ';
?>

从客户端(HTML，Javascript，Vbscript ..等)向服务器端(PHP，ASP，JSP等)发送数据有3种相关方法

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

HTML表单发布请求(GET或POST)

这是最常用的方法，我们可以通过此方法发送更多数据

AJAX

这是异步方法，这必须以安全的方式工作，这里我们也可以发送更多的数据。

曲奇饼

这是使用少量不敏感数据的好方法。这是处理数据的最佳方式。

在您的情况下您可以更喜欢HTML表单或AJAX。但在发送到服务器之前，请自行验证您的json或使用http://jsonlint.com/之类的链接

如果你有Json对象使用JSON.stringify(object)将它转换为String，如果你有JSON字符串发送它原样。

相关讨论

PHP有一个名为json_decode()的内置函数。只需将JSON字符串传递给此函数，它就会将其转换为PHP等效的字符串，数组或对象。

为了将其作为字符串从Javascript传递，您可以使用它将其转换为JSON

1
JSON.stringify(object);

或者像Prototype这样的库

我推荐jquery.post()方法。

使用JSON.stringify(yourObj)或Object.toJSON(yourObj)最后一个是使用prototype.js，然后使用你想要的任何东西，ajax或submit发送它，你按照建议使用json_decode(http：// www。 php.net/manual/en/function.json-decode.php)在php中解析它。然后你可以将它用作数组。

1
2
3
4
5
6
7
8
9
    <html>
<script type="text/javascript">
var myJSONObject = {"bindings": 11};
alert(myJSONObject);

var stringJson =JSON.stringify(myJSONObject);
alert(stringJson);

</html>

您可以轻松地将对象转换为urlencoded字符串：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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&

我找到了简单的方法，但我知道它并不完美

1.分享杰森

如果你是JSON

1
2
3
4
var data = [
    {key:1,n:"Eve"}
    ,{key:2,n:"Mom"}
];

在--- main.php ----

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    <form action="second.php" method="get">
                <input name="data" type="text" id="data" style="display:none">
                <input id="submit" type="submit"  style="display:none">

     </form>

   

      var data = [
        {key:1,n:"Eve"}
        ,{key:2,n:"Mom"} ];

       function setInput(data){
         var input = document.getElementById('data');
         input.value = JSON.stringify(data);
        var submit =document.getElementById('submit');

       //to submit and goto second page
        submit.click();

    }


   //call function
   setInput(data);

在------ second.php -----

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
printJson();

function printJson(){
 var data = getUrlVars()["data"];

//decode uri to normal character
data =  decodeURI(data);
//for special character , / ? : @ & = + $ #
data =  decodeURIComponent(data);
//remove " '" at first and last in string before parse string to JSON
data = data.slice(1,-1);
data = JSON.parse(data);
alert(JSON.stringify(data));

}

//read get variable form url
//credit http://papermashup.com/read-url-get-variables-withjavascript/
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}