Question

我创建了一个简单的联系我们表单，它将捕获数据并通过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>

PHP

<?php
$example = $_POST['arr'];
echo $example;
?>

HTML

  <body>
  <h1> Contact Us </h1>
  We value your feedback. Send in your questions, suggestions, ideas to help us improve our service.

  <h2 align="Center"> Search us on Google Maps</h2>
<br> 
    <br>
  <div id="map-canvas" > </div>


    <form action="contact.php" name="form" method="post" >
   <div id= "result">
    <br>Name :<br>

    <input type="text" name="fName" id="fName"  required >

    &nbsp; &nbsp;
   <input type="text" name="lName" id="lName"  required >
    <br> <br>
    Email: <br>

    <input type="email" name="email" id="email" required >

    <br> <br>
    Comment: <br>

    <textarea name= "comment" rows="8" cols="50"  autofocus></textarea>

     <br> <br>

    Rate our Website <select name="select" id="selected" autofocus>
    <option value = "1" name= "rate"> 1 </option>
    <option value = "2" name= "rate"> 2 </option>
    <option value = "3" name= "rate"> 3 </option>
    <option value = "4" name= "rate"> 4 </option>
    <option value = "5" name= "rate"> 5 </option>

    </select>

     <br> <br>
    <input type="submit" name="submit" id="submit" value="Submit">

  </form>
  </body>

Answer 1

在您的AJAX通话中，您发送的数据只是＆＃34;名称：145＆＃34;，因此您帖子中唯一的内容是$ _POST [＆＃39; name＆＃39;]。 arr值永远不会传递给你的AJAX函数，因此它不会传递给arr＆＃39;过度。

如果您希望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 $ _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方面，您现在可以使用$ _POST [＆＃39; firstName＆＃39;]获取第一个名称，$ _POST [＆＃39; email＆＃39;]来获取电子邮件，以及等等。

修改

由于你在$（document）.ready（）上运行$ .ajax，jQuery在页面加载后立即运行ajax函数。我假设您想要的是在用户点击＆＃34;提交＆＃34;按钮。为此，您需要调整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是否正常工作，因为您应该得到一个警告＆＃34;来自javascript，显示您从PHP回复的任何消息。

Answer 2

替换

data: ({name: 145}),

与

data: {arr: arr},

通过JSON进行PHP到PHP数据交换无法正常工作

2 个答案: