2

我是一个完整的 ajax/php 白痴 - 让我们现在就解决这个问题；但我已经到了需要帮助的地步。我一直在这里和那里学习各种教程，并整理了一份报告。

最终，我有一个包含我需要的所有数据的表。我可以获取该数据并在表格中适当地显示它而不会出现问题。我正在尝试添加允许根据条件进行过滤的“下拉”框（此表中有一个名为“垂直”的列 - 因此下拉列表将包含数据库列中的所有不同“垂直” - 和根据垂直的选择过滤表格）

我有以下名为“client.php”的前端片段，客户端加载该片段以获取报告：

客户端.php：

<head>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 <link rel="stylesheet" type="text/css" href="css/mediacallreport.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Generic Title</title>
</head>



<body>
  <h2> Generic Reports </h2>
  <h3>Report Formatting: </h3>
  <div id="instruction">Select how you would like the data selected using the dropdowns below</div>

  <!--DROPDOWNS-->
 Vertical - 
<select name="station" id="station">
    <option value="all">All</option>
    <script id="source" language="javascript" type="text/javascript">
      $(function () 
      {
        $.ajax({                                      
          url: 'api.php',   //the script to call to get data          
          data: "",   //you can insert url argumnets here to pass to api.php
          dataType: 'json',   //data format      
          success: function(verticals) //on recieve of reply
          {
          for (var i in verticals)
          {
            var vertical = verticals[i];
            var verticalID = verticals[0];

        $('station').append("<option value=\""+verticalID+"\">"+verticalID+"</option>");
                }

          } 
        });
      });
    </script>
</select>

 <!--TABLE BEGINNING - TABLE HEADER ROW--> 
<table id="output">
<tr>
<th>ID</th>
<th>Station_Network</th>
<th>Vertical</th>
<th>Creative</th>
<th>Tolls</th>
<th>States</th>
<th>Date Range</th>
<th>Week</th>
<th>Ordered</th>
<th>Credits</th>
<th>Credits Totals</th>
<th>Not Used</th>
<th>Cleared</th>
<th>Total Uniques</th>
<th>Cleared Each Unique</th>
<th>Total Unique Connect</th>
<th>Cleared Each Unique Connect</th>
<th>Unique Connect 8am - 8pm</th>
<th>Cleared Unique 8am - 8pm</th>
<th>Calls over 10 Min</th>
<th>Calls over 10 Min %</th>
</tr>

<!--JAVASCRIPT TO GET INFORMATION FROM DB, ASSIGN VARIABLES AND PUT INTO TABLE ROWS-->
  <script id="source" language="javascript" type="text/javascript">
  $(function () 
  {
    //-----------------------------------------------------------------------
    // 2) SEND HTTP REQUEST WITH AJAX
    //-----------------------------------------------------------------------
    $.ajax({                                      
      url: 'api.php',   //the script to call to get data          
      data: "",   //you can insert url argumnets here to pass to api.php
                        //for example "id=5&parent=6"
      dataType: 'json',   //data format      
      success: function(rows) //on recieve of reply
      {
      for (var i in rows)
      {
        var row = rows[i];
        var id = row[0];              //get id
        var station_network = row[1];       //get name
        var vertical = row[2];  //get vertical
        var creative = row[3]; //get creative
        var tolls= row[4];  //get tolls
        var states= row[5];  //get states
        var date_range= row[6];  //get date_range
        var week= row[7];  //get week
        var ordered= row[8];  //get ordered
        var credits= row[9];  //get credits
        var credit_totals= row[10];  //get credit_totals
        var not_used= row[11];
        var cleared= row[12];
        var total_uniques= row[13];
        var cleared_each_unique= row[14];
        var total_unique_connect= row[15];
        var cleared_each_unique_connect= row[16];
        var unique_connect_8am_to_8pm= row[17];
        var cleared_each_8am_to_8pm= row[18];
        var calls_over_10= row[19];
        var calls_over_10_pct= row[20];
        //--------------------------------------------------------------------
        // DISPLAY THE CONTENT
        //--------------------------------------------------------------------
        //TABLES (ALTERNATING ROWS)
        if (id % 2 == 0){
        $('#output').append("<tr id=\"evenrow\"> <td>"+id+"</td><td>"+station_network+"</td><td>"+vertical+"</td><td>"+creative+"</td><td>"+tolls+"</td><td>"+states+"</td><td>"+date_range+"</td><td>"+week+"</td><td>"+ordered+"</td><td>"+credits+"</td><td>"+credit_totals+"</td><td>"+not_used+"</td><td>"+cleared+"</td><td>"+total_uniques+"</td><td>"+cleared_each_unique+"</td><td>"+total_unique_connect+"</td><td>"+cleared_each_unique_connect+"</td><td>"+unique_connect_8am_to_8pm+"</td><td>"+cleared_each_8am_to_8pm+"</td><td>"+calls_over_10+"</td><td>"+calls_over_10_pct+"</td></tr>");
        } else {
        $('#output').append("<tr id=\"oddrow\"> <td>"+id+"</td><td>"+station_network+"</td><td>"+vertical+"</td><td>"+creative+"</td><td>"+tolls+"</td><td>"+states+"</td><td>"+date_range+"</td><td>"+week+"</td><td>"+ordered+"</td><td>"+credits+"</td><td>"+credit_totals+"</td><td>"+not_used+"</td><td>"+cleared+"</td><td>"+total_uniques+"</td><td>"+cleared_each_unique+"</td><td>"+total_unique_connect+"</td><td>"+cleared_each_unique_connect+"</td><td>"+unique_connect_8am_to_8pm+"</td><td>"+cleared_each_8am_to_8pm+"</td><td>"+calls_over_10+"</td><td>"+calls_over_10_pct+"</td></tr>");
        }

        }

      } 
    });
  });
  </script>

</body>
</html>

这与我的 api.php api.php 对话：

<?php 
  //--------------------------------------------------------------------------
  // Connect to DB
  //--------------------------------------------------------------------------
  include 'DB.php';
  $con = mysql_connect($host,$user,$pass) ;
  $dbs = mysql_select_db($databaseName, $con);
  //--------------------------------------------------------------------------
  // 2) Query database for data
  //--------------------------------------------------------------------------
  //Rows of data in media-analysis
  $result = mysql_query("SELECT * FROM $tableName");          //query
  $data = array();
  while ($row = mysql_fetch_row($result) )
  {
  $data[] = $row;
  }



  //Dropdown for Verticals
    $verticalSql = "SELECT VERTICAL FROM media_analysis GROUP BY VERTICAL";
    $verticalResult = mysql_query($verticalSql);
    $verticalData = array();
    while ($verticalRow = mysql_fetch_row($verticalResult)){
        $verticalData[] = $verticalRow;
    }

    $finalarray = array ('rowdata' => $data, 'verticaldata' => $verticalData);
  //--------------------------------------------------------------------------
  // 3) echo result as json 
  //--------------------------------------------------------------------------
  echo json_encode($finalarray);
?>

在 Firebug 中，我可以看到遇到的数据，它看起来像这样：

{"rowdata":[["1","canceled","canceled","canceled","canceled","canceled","03\/18\/2013-03-24\/2013","12","canceled","0","","","0.00","0","0.00","0","0.00","0","0.00","0","0.00"],["2","Station B","Vertical B","DEBIT","800-555-5555","CA","03\/18\/2013-03-24\/2013","12","$813.00","0","","","813.00","8","101.62","5","162.60","3","271.00","2","40.00"]],"verticaldata":[["canceled"],["Vertical B"]]}

在我开始包含“下拉菜单”之前，我只有一个简单的 json_encode ($data); 它会正常工作，并且表格完全显示了我想要的方式。由于我添加了另一个要传递的数组，这就是事情变得疯狂而我完全迷失的时候。

我知道我的编码可能很差，但我只是想解决这个问题。所有帮助表示赞赏。

4

2 回答 2

4

问题是成功处理程序中的代码需要返回一个数组：

success: function(verticals) //on recieve of reply
{
    for (var i in verticals)
    {
        var vertical = verticals[i];
        var verticalID = verticals[0];

        $('station').append("<option value=\""+verticalID+"\">"+verticalID+"</option>");
    }

}

但是，正如您在示例中所示，verticals如下所示：

{"rowdata":[[...],[...]],"verticaldata":[["canceled"],["Vertical B"]]}

如您所见，verticals是一个对象，其中包含另外两个对象（rowdata和verticaldata）。

要使您当前的成功处理程序再次工作，您首先需要verticaldata从 AJAX 响应中提取。只需将代码更改为此即可：

success: function(response) //on recieve of reply
{
    var verticals = response.verticaldata;
    for (var i in verticals)
    {
        var vertical = verticals[i];
        var verticalID = verticals[0];

        $('station').append("<option value=\""+verticalID+"\">"+verticalID+"</option>");
    }
}
于 2013-04-01T21:13:49.130 回答
2

由于您使用的是 PHP 和 jQuery，因此您可以使用我的库。开箱即用地处理来自 PHP 到 Javascript 的任何数据，反之亦然；）

见这里http://phery-php-ajax.net

在你的情况下，它会是这样的

<?php
   include('Phery.php');

   Phery::instance()->set(array(
     'verticals' => function(data){
        $r = new PheryResponse;

        $verticalResult = mysql_query("SELECT VERTICAL FROM media_analysis GROUP BY VERTICAL");

        $r->jquery('.station'); // Select it for subsequent chaining in the loop
        $i = 0;
        while ($verticalRow = mysql_fetch_row($verticalResult)){
          $r->append('<option value="'.($i++).'">'.$verticalRow['VERTICAL'].'</option>'); // What is VERTICAL? Is that query the real one?
        }
        // every "append" call will happen to .station jquery selector automatically
        return $r;
     }
   ))->process();
?>

在您的 JavaScript 代码中

$(function(){
   phery.remote('verticals');
});

就是这样。为什么（重新）生成数据，当您可以在服务器中执行一次时（数据生成所属的位置）

当然，您可以只返回 JSON 并使用phery:json，但这在您的情况下不实用

return PheryResponse::factory()->json($verticalData);

和 Javascript 方面

phery.remote('verticals', null, null, false).on('phery:json', function(data){
  for (var i in data){
    // do your append here
  }
});
于 2013-04-01T21:15:07.347 回答