Question

我的问题是......如何让json与几个对象进行1次回调。

我将使用这个返回3个值的示例...这是calclickM.php文件，但我无法理解为什么它不会被唤醒......

    <?php  
$choice = (isset($_POST['choice'])) ? date("Y-m-d",strtotime($_POST['choice'])) : date("Y-m-d"); 
$con = mysql_connect("localhost","root","xxxxxx");  
if (!$con)  {  die('Could not connect: ' . mysql_error());  }  
mysql_select_db("inverters", $con);  

$sql = "SELECT sum(power/1000) AS choice FROM feed WHERE date = '".$choice."' group by date"; $res = mysql_query($sql) or die('sql='.$sql."\n".mysql_error()); 
$row = mysql_fetch_assoc($res); 
$dayPowerP = array ('dayPowerP');
?>

<?php 
$choice = (isset($_POST['choice'])) ? date("m",strtotime($_POST['choice'])) : date("m"); $con = mysql_connect("localhost","root","xxxxxx");  
if (!$con)  {  die('Could not connect: ' . mysql_error());  }  
mysql_select_db("inverters", $con);  
$sql = "SELECT sum(power/1000) AS choice FROM feed WHERE month(date) = '".$choice."'";
$res = mysql_query($sql) or die('sql='.$sql."\n".mysql_error()); 
$row = mysql_fetch_assoc($res); 
$monthPowerP = array ('monthPowerP');
?>

<?php 
$choice = (isset($_POST['choice'])) ? date("Y",strtotime($_POST['choice'])) : date("Y"); $con = mysql_connect("localhost","root","xxxxxx");  
if (!$con)  {  die('Could not connect: ' . mysql_error());  }  
mysql_select_db("inverters", $con);  

$sql = "SELECT sum(power/1000) AS choice FROM feed WHERE year(date) = '".$choice."'";
$res = mysql_query($sql) or die('sql='.$sql."\n".mysql_error()); 
$row = mysql_fetch_assoc($res); 
$yearPowerP = array ('yearPowerP');
?>
<?php
$outarr['dayPowerP'] = $dayPowerP;
$outarr['monthPowerP'] = $monthPowerP;
$outarr['yearPowerP'] = $yearPowerP;
echo json_encode($outarr);
?>

这是我用来发布的Jquery和json

    <script type="text/javascript">
$(document).ready(function () {   
$('#datepicker').datepicker({maxDate: 0, dateFormat: 'yy-mm-dd', onSelect: function(dateText) {
            var myDate = $(this).datepicker('getDate');
            $('#apDiv1').html($.datepicker.formatDate('DD, d', myDate));
            $('#apDiv5').html($.datepicker.formatDate('MM', myDate));
            $('#apDiv7').html($.datepicker.formatDate('yy', myDate));           
            $.ajax({  
            type: "POST",   
            url: "calclickM.php",                  
            data: {choice: dateText}, 
            dataType: "json",  
            success: function(json_data) {  
            $('#apDiv2').html(json_data['dayPowerP']);  
            $('#apDiv6').html(json_data['monthPowerP']);  
            $('#apDiv8').html(json_data['yearPowerP']);  
           } 
        })           
    }});
});

谢谢，

艾伦

Answer 1

首先，您调用的load方法正在向您的服务器发出AJAX GET请求。您可能在PHP脚本中支持POST和GET请求。

其次，您的$.ajax来电时有一些错误。有一些未终止的字符串，您使用的数据变量('#apDiv9').html(data)未定义，如果是，它可能包含您无法直接放入HTML元素的JSON数据。

最后，但并非最不重要的是，第二次尝试不会使您的代码更快。浏览器只能支持有限数量的并行ajax请求（1-2）。您仍在进行相同数量的请求，其中一些需要等待其他请求完成。重新设计代码，以便在一次通话中返回所有内容。

Answer 2

不是解决您的直接问题，但您的代码需要一些严重的重构。这里的重复程度伤害了我的眼睛。第二个代码块，即带有ajax调用的代码块，可以更改为：

var pages = [
  { url: "dayPower.php",   div: "#apDiv4"  },
  { url: "dayGraph",       div: "#apDiv2"  },
  { url: "monthPower.php", div: "#apDiv6"  },
  { url: "monthGraph",     div: "#apDiv9"  },
  { url: "yearPower.php",  div: "#apDiv8"  },
  { url: "yearPower",      div: "#apDiv10" }
};

for ( var i=0; i<pages.length; i++ ) {
  $.ajax({ 
    type: "POST",  
    url: pages[i].url,                 
    data: { choice: dateText}, 
    dataType: "json", 
    success: function(json_data ) 
      (pages[i].div).html(data).show(); // Did you mean json_data here?
    }
  });
}

案例类似于你问题中的第一段代码。

再一次，我知道它不会解决实际问题，但是当你（或其他人）发现它时，它会更容易实现解决方案。

修改

第二个想法，我至少可以看到一个奇怪的事情：在成功函数中，您调用参数json_data，但是您访问了一个您调用data的变量。你打算给他们命名同样的东西吗？

Answer 3

有一种方法可以满足您的要求，但您需要自己处理结果。基本上所有的Ajax调用都具有相同的参数，但结果集不同。首先，客户端代码实现了魔力：

$.post('datePacked.php', {choice: dateText}, function(data) {
    $('#apDiv2').html(data['dayPower']);
    $('#apDiv4').html(data['dayGraph']);
    $('#apDiv6').html(data['monthPower']);
    $('#apDiv9').html(data['monthGraph']);
    $('#apDiv8').html(data['yearPower']);
    $('#apDiv10').html(data['yearGraph']);
});

如果您重构了HTML，那么实际上将div ID与您的JSon响应的结果相匹配，您可以进一步简化调用：

$.post('datePacked.php', {choice: dateText}, function(data) {
    $.each(data, function(id, value) {
        $('#'+id).html(value);
    });
});

在服务器端，您的新datePacked.php需要返回一个JSON结果，该结果为内容提供名称哈希。基本上它看起来像这样：

{ "dayPower" : "<p>My Content</p>", "dayGraph" : "<p>Day graph</p>", ... }

省略号可供您填写内容的其余部分。为HTML元素选择有意义的id名称不仅是一种好的做法，如果你利用它，它可以为你节省大量的重复数据。这方面的一个例子是客户端示例的第二种形式。这是一个内容必须是JSON才能工作的情况 - 除非您想要拆分服务器返回的DOM。

Answer 4

我不确定你在问什么，但这里有几点：

$('#apDiv2').load('dayPower.php', {choice: dateText}与$.ajax({type: "POST", url: "dayPower.php", data: { choice: dateText}做同样的事情。 $.ajax和$.load都通过JavaScript发出HTTP请求，这就是“AJAX”的含义。

您的第二个示例代码块有一些基本的语法错误。这是第一个修正的$ .ajax调用：

$.ajax({ 
    type: "POST",  
    url: "dayPower.php",                 
    data: { choice: dateText}, 
    dataType: "json", 
    success: function(json_data ) { // “{” added to start the function block
        ('#apDiv2').html(data).show(); 
    }
}) // “})” added to end the object literal and function call

Answer 5

如果您永远不需要单独调用任何一个，为什么不只是对php文件进行一次ajax调用，将所有数据打包成多维数组，转换为json，然后发送回客户端。

一旦你拥有了这个json，你就可以用js将其分解并找出你前端的位置。

根据您获得的数据量，可能需要一段时间。如果这是一个巨大的查询，那么将其分解为几个小调用实际上会更好。它的异步，所以至少部分页面将被加载。而其他部分正在收集数据。

一个JSON调用返回了很多？

5 个答案: