一个带有JSON响应且传递对象的AJAX示例

Question

我在使用AJAX将关联数组发送到php文件时遇到了困难。 有些事情我不清楚。 这是我的代码，可以通过输入标签的形式来制作数组，但是我不知道如何在php中发送和解释它。

<script type="text/javascript">
$(document).ready(function(){
  $(':submit').on('click', function() { // This event fires when a button is clicked
      var theData = {};
      $(":input:not(:button)").each(
        function(index){  
            var input = $(this);
            theData[input.attr('name')] = input.val();
        }
      );
      $.ajax({ // ajax call starts
          url: "http://www.aberlechiropractic.com/meningealrelease/modifydoctors/modifydoctors3.php",
          data: theData,
          dataType: 'json',
          success: function(data)
          {
              $('#wines').html(''); // Clear #wines div
              $('#wines').append('Data Received: ' + data.name+'   '+data.address + '<br/>');
          }
      });
      return false; // keeps the page from not refreshing 
  });
});
</script>

<body>
  <form>
    <input type="text" name="name" id="name" value="Jeff Aberle"/>
    <input type="text" name="address1" id="address1" value="4710 East Broadway"/>
    <button type="submit" name="updatedoctor" id="updatedoctor" value="all">All</button>
  </form>
</body>

这是我的PHP代码：

<?php
$name = $_GET['name'];
$address1 = $_GET['address1'];
$array = array($button, $address1);
print json_encode($array);
?>

嗯，现在一切正常。 我在这里编辑了所有代码以使其正常工作。

<?php
// Get value of clicked button
$name = $_GET['name'];
$address1 = $_GET['address1'];
$array = array(
    "name"    => $name,
    "address"  => $address1,
);
print json_encode($array);
?>

我也有一个id = wines的div。 这是我忘记展示的另一件事。 那是数据返回并显示的地方，但没有名称。

Answer 1

您的jQuery代码收集值是正确的，尽管.serialize()可以简化它。

要检索PHP中的值，就像正常提交表单一样。 它们位于$_GET['name']和$_GET['address1'] 。 theData只是包含对象的Javascript变量的名称，而不是发送给PHP的属性名称。

Answer 2

抱歉，我在手机上，所以它的答案很短，但是请使用序列化

http://api.jquery.com/serialize/

例

    $('form').on('submit', function(){
      $data = $(this).serialize();
      //send via ajax
      return false;
    })

Answer 3

发送数据：我假设您要发送表单结果？ 为此，首先您需要在页面上添加一个提交按钮。 这应该放在您的表单中以提交代码。

其次，您似乎缺少了在AJAX成功响应中引用的<div id="wine"> ，因此您需要添加它。

Answer 4

尝试此操作，您必须在表单中添加按钮以触发操作：

<script type="text/javascript">

$(document).ready(function(){
  $('#submit').live('click', function() {
      var theData = {};
      $(":input:not(:button)").each(
        function(index){  
            var input = $(this);
            theData[input.attr('name')] = input.val();
        }
      );
      $.ajax({
          url: "http://www.aberlechiropractic.com/modifydoctors3.php",
          data: theData,
          dataType: 'json',
          success: function(data)
          {
              $('#wines').html(''); // Clear #wines div
              $('#wines').append('Data Received: ' + data + '<br/>');
          }
      });
      return false; // keeps the page from not refreshing 
  });
});
</script>

<body>
  <form>
    <input type="text" name="name" id="name" value="Jeff Aberle"/>
    <input type="text" name="address1" id="address1" value="4710 East Broadway"/>
    <input type="button" id="submit" value ="send"/>
  </form>
</body>




<?php
$button = $_GET['theData'];
$array = array($button.name, $button.address1, $button.state);
print json_encode($array);
?>

一个带有JSON响应且传递对象的AJAX示例

问题描述

4 个解决方案

解决方案1
1 已采纳 2013-10-04 01:23:49

解决方案2
0 2013-10-04 01:15:42

解决方案3
0 2013-10-04 01:18:00

解决方案4
0 2013-10-04 01:19:29

一个带有JSON响应且传递对象的AJAX示例

问题描述

4 个解决方案

解决方案1 1 已采纳 2013-10-04 01:23:49

解决方案2 0 2013-10-04 01:15:42

解决方案3 0 2013-10-04 01:18:00

解决方案4 0 2013-10-04 01:19:29

解决方案1
1 已采纳 2013-10-04 01:23:49

解决方案2
0 2013-10-04 01:15:42

解决方案3
0 2013-10-04 01:18:00

解决方案4
0 2013-10-04 01:19:29