通过JSON从JavaScript到PHP的数据交换不起作用

我创建了一个简单的联系我们表单，它将捕获数据并通过JSON发送到服务器端，并在PHP页面上显示。我是JSON的初学者。请告诉我哪里出了问题

JavaScript

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  
<script type="text/javascript">

 $(document).ready(function(){
var arr = {
      firstName : document.getElementById('fName').value,
      lastName  : document.getElementById('lName').value,
      email     : document.getElementById('email').value,
      comment   : document.getElementById('comment').value,
      rate      : document.getElementById('select').value
    };
  $.ajax({
    url: 'contact.php',
    type: "post",
    data: arr,
    contentType: 'application/json; charset=utf-8',
    dataType: "json"
    success: function(msg) {
    alert("msg");
    }
    });
 });
 </script>

$（文档）.ready（函数（）{
var arr={
名字：document.getElementById（'fName'）。值，
lastName:document.getElementById（'lName'）。值，
电子邮件：document.getElementById（'email'）。值，
注释：document.getElementById（'comment'）。值，
速率：document.getElementById（'select'）。值
};
$.ajax({
url:'contact.php'，
类型：“post”，
数据：arr，
contentType:'application/json；charset=utf-8'，
数据类型：“json”
成功：功能（msg）{
警报（“msg”）；
}
});
});

PHP

HTML

联系我们
我们重视您的反馈。发送您的问题、建议和想法，以帮助我们改进服务。
在谷歌地图上搜索我们





名称：




电子邮件：




评论：




评价我们的网站
1.
2.
3.
4.
5.

在AJAX调用中，您发送的数据只是“name:145”，因此您的帖子中只有$\u post['name']。arr值永远不会传递给AJAX函数，因此它不会传递“arr”

如果希望PHP端保持不变，您需要的是：

$(document).ready(function(){
var arr = {arr: {
    firstName : document.getElementById('fName').value,
    lastName  : document.getElementById('lName').value,
    email     : document.getElementById('email').value,
    comment   : document.getElementById('comment').value,
    rate      : document.getElementById('select').value
}};
$.ajax({
    url: 'contact.php',
    type: "post",
    data: arr,
    contentType: 'application/json; charset=utf-8',
    dataType: "json"
    success: function(msg) {
    alert("msg");
}
});
});

使用JSON时，通过post请求发送的内容如下所示：

对于以这种方式格式化的JSON数组：

var json = { 'name' : 'leneya', 'id' : '74'} 

您的PHP$\u POST数组如下所示：

$_POST['name'] => 'leneya'
$_POST['id'] => '74'

如果我是你，我可能会将我的JSON格式化为：

$(document).ready(function(){
var arr = {
  firstName : document.getElementById('fName').value,
  lastName  : document.getElementById('lName').value,
  email     : document.getElementById('email').value,
  comment   : document.getElementById('comment').value,
  rate      : document.getElementById('select').value
};
$.ajax({
    url: 'contact.php',
    type: "post",
    data: arr,
    contentType: 'application/json; charset=utf-8',
    dataType: "json"
    success: function(msg) {
        alert("msg");
    }
});
});

注意我如何将arr变量传递到数据中，因为这就是通过AJAX请求发送JSON的方式

然后在PHP端，您现在可以使用$\u POST['firstName']来获取名字，使用$\u POST['email']来获取电子邮件，依此类推

编辑

由于您在$（document）.ready（）上运行$.ajax，因此jQuery会在页面加载后立即运行ajax函数。我假设您希望在用户单击“提交”按钮后提交表单。为此，您需要调整javascript：

       $(document).ready(function(){
        //this line binds the ajax functionality to the click of the submit button
        $('input[type="submit"]').on('click',function(e){
            //this prevents the form from submitting itself to php.
            e.preventDefault();

            var arr = {
                firstName : document.getElementById('fName').value,
                lastName  : document.getElementById('lName').value,
                email     : document.getElementById('email').value,
                comment   : document.getElementById('comment').value,
                rate      : document.getElementById('select').value
            };
            $.ajax({
                url: 'contact.php',
                type: "post",
                data: arr,
                contentType: 'application/json; charset=utf-8',
                dataType: "json"
                success: function(msg) {
                    alert("msg");
                }
            });
        });
    });

在PHP方面，您现在可以根据JSON数组访问密钥

$_POST['firstName'], 
$_POST['lastName'], 
$_POST['email'] ... 

同样，post数组中的键应该与JSON数组中的键匹配。如果他们不这样做，那么您的AJAX仍然无法工作。此外，您还可以判断AJAX是否正常工作，因为您应该从javascript获得一个“警报”，该警报显示您从PHP发出的任何消息。

replace

data: ({name: 145}),

与

---

尝试使用编写的代码，将echo更改为

echo$\u POST['name']。我看不出您正在通过AJAX向何处发送
arr
。发送到脚本的唯一数据是单变量
name
。要发布的数据是AJAX调用的
data
属性应该是什么。看起来您只是简单地发送数据：（{name:145}），作为数据，因此对$_POST['arr']的php调用将找不到任何东西，因为它从未被发送过。我已将所有内容更改为您上面所说的内容，但我遇到了类似这样的错误。注意：未定义的索引：C:\xampp\htdocs\contact.php中的firstName，在第11行，您可以使用var_dump（$\u POST）并让我知道它说了什么吗？数组（6）{[“fName”]=>string（5）“akila”[“lName”]=>string（13）“Hettiarachchi”[“email”]=>string（15）”akila@gmail.com“[“注释”]=>string（3）“cas”[“选择”]=>string（1）“1”[“提交”]=>string（6）“提交”}”不要使用$_POST['firstName']访问firstName，而是使用$_POST['fName']访问它；在php方面，我假设您的JSON看起来像var arr={'fName'：'akila'，'lName'：'hettiarachchi'..}您必须使用JSON数组中相同的键访问$\u POST数组键。在本例中，“fName”是您的JSON键，因此$\u POST键也将是“fName”
$_POST['firstName'], 
$_POST['lastName'], 
$_POST['email'] ... 

data: ({name: 145}),

data: {arr: arr},