Question

我知道有很多关于此主题的文章，但其中大多数都是关于外部JSON文件的。

我实际上想将AJAX在同一页面上提到的JSON对象发送到PHP页面，然后将所有发送的JSON值放在h1标记中的PHP页面中？

这是我的代码示例。

index.php

<script>

document.addEventListener('DOMContentLoaded',function(){

document.querySelector('#submit').addEventListener('click',fx);

function fx(){

//<JSON data>

var data = {
    firstName: "Jon",
    lastName: "Smith",
    age: 24
};

//</JSON data>

//<AJAX>
var xhr= new XMLHttpRequest();
xhr.onreadystatechange= function(){

if(xhr.readyState == 4){

document.querySelector('#output').innerHTML= xhr.responseText;

}
}

xhr.open('POST','x');
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(data);
//</AJAX>
}

});

</script>

<button id='submit'>Send JSON data</button>

<div id='output'></div>

x.php

<?php
//???
?>

<h1><?php //show all the sent JSON object values in this h1 tag ?></h1>

Answer 1

使用JSON.stringify()将对象转换为JSON字符串并发送，然后在php脚本中使用json_decode()将JSON解码为对象或数组。

javascript

var data = {
    firstName: "Jon",
    lastName: "Smith",
    age: 24
};
var myJSON = JSON.stringify(data); 

// additions to your xhttp send section
xhttp.open("POST", "x.php", true); // setting the third parameter to 'true' make the ajax call asynchronous, remove that if you want a synchronous request
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("jsonstr=myJSON");

php

$jsonstr = $_POST["jsonstr"];
$data = json_decode($jsonstr); // if you want $data to be an object

echo $data->firstName; // Jon
echo $data->lastName; // Smith
echo $data->age; // 24

或

$jsonstr = $_POST["jsonstr"];
$data = json_decode($jsonstr,true); // if you want $data to be an array

echo $data[firstName]; // Jon
echo $data[lastName]; // Smith
echo $data[age]; // 24

在x.php中，您应该可以这样设置标题：

<h1><?php echo $data->firstName.' '.$data->lastName.' '.$data->age;?></h1>

Answer 2

尝试这个例子。

index.php

<script>

document.addEventListener('DOMContentLoaded',function(){

document.querySelector('#submit').addEventListener('click',sendUserInfo);

function sendUserInfo(){

//<JSON data>

var user_info = {
    first_name: "John",
    last_name: "Smith",
    age: 24
};

//</JSON data>

var user_info_json_object= 'user_info_json_object='+JSON.stringify(user_info); 

//<AJAX>
var xhr= new XMLHttpRequest();
xhr.onreadystatechange= function(){

if(xhr.readyState == 4){

document.querySelector('#output').innerHTML= xhr.responseText;

}
}

xhr.open('POST','x');
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(user_info_json_object);
//</AJAX>
}

});

</script>

<button id='submit'>Send JSON data</button>

<div id='output'></div>

x.php

<?php

$user_info_json_object = json_decode($_POST['user_info_json_object']);

$first_name= $user_info_json_object->first_name;
$last_name= $user_info_json_object->last_name;
$age= $user_info_json_object->age;

?>

<h1><?php echo $first_name; ?></h1>
<h1><?php echo $last_name; ?></h1>
<h1><?php echo $age; ?></h1>

不确定如何通过Ajax从同一页面将json对象发送到另一页面

2 个答案: