检索JSON数据并在AJAX表中显示

Question

我对jQuery编程非常新颖。我花了很长一段时间努力推进这项工作，并且设法完成了一些工作。但是我真的碰壁了，我似乎无法从任何地方/任何人那里寻求帮助。

场景：

• 我用一个选择框来存储不同的音乐类型，我已经通过PHP/MySQL的检索。

  <?php 
  include 'connectingDB.php'; 
  $catSQL = "SELECT * FROM category ORDER BY catDesc"; 
  $queryresult = mysql_query($catSQL) 
  or die (mysql_error()); 
  echo "<select id= \"catID\">"; 
  while ($row = mysql_fetch_assoc($queryresult)) { 
      $catID = $row['catID']; 
      $catDesc = $row['catDesc']; 
  
  
      echo "<option value = \"$catID\">$catDesc</option>\n"; 
  
  } 
  echo "</select>"; 
  mysql_free_result($queryresult); 
  mysql_close($conn); 
  ?> 
  

• 当我点击一个流派，我希望所有的相关的CD和CD信息以JSON格式进行检索和动态的（在同一页面上下面的选择框）使用AJAX的表格显示

  <?php 
  header('Content-type: application/json'); 
  include 'connectingDB.php'; 
  $category = $_REQUEST['catname']; 
  $sql = "SELECT `CDID`, `CDTitle`, `CDYear`, `pubID`, `CDPrice` 
       FROM `tiptop_cd` 
       INNER JOIN tiptop_category 
       ON tiptop_cd.catID=tiptop_category.catID 
       WHERE catDesc = '{$category}'"; 
  $result = mysqli_query($con,$sql); 
  $row = mysqli_fetch_array($result); 
  while($row = mysqli_fetch_array($result)){ 
      $returned[] = $row; 
  } 
  echo json_encode($returned); 
  

  ？>

• 所有上面的代码运行在拥有。但我期望将它们连接在一起。我认为它需要通过jQuery中的onchange事件？

• 我有一个alert点击某个类别后弹出，但是这是据我可以得到..

  $(document).ready(function(){ 
  $("#catID").change(function(){ 
  alert("The text has been changed."); 
  }); 
  }); 
  

是否需要在一个foreach循环？或foreach内foreach？

总之，我想了解如何：显示当前选定，在一个动态表阿贾克斯

所涉及到的具体类别的光盘和光盘信息任何帮助是大规模赞赏。

Answer 1

您可能需要使用AJAX用于此目的。 Ajax将允许您将用户的选择（即下拉选择）发送到后端PHP文件。

PHP文件将处理接收到的数据（即用户的选择）并根据该信息执行数据库查找。它将从db获得结果并构造（在变量中）该表所需的HTML，然后返回该变量的内容 - 将在AJAX过程的success:（或.done()中使用promise语法）函数中接收该变量的内容。

INSIDE成功/完成功能，可以使用收到的数据。例如，您可以使用jQuery .html()方法将指定DIV的内容替换为您收到的HTML。

我的做法会与其他提出的解决方案不同，在以下几个方面：

1. 我更喜欢使用完整$.ajax()语法，因为它允许更大的结构，这使得它比较容易理解/操作的第一。请注意，.post()，.get()和​​都是$.ajax()的所有快捷形式，为了简化流程做了某些假设。我建议先学习$.ajax()格式，然后再利用其他格式。完成ajax gazillions阻止我自己，我继续使用$.ajax()大多数时间。也许这是一种偏好，但我觉得使用/阅读/评论更容易 - 而且它还允许其他参数不具备其他参数，这使得它更加灵活和有用**。

2. 有必要使用第二个.PHP文件充当您的ajax处理器。您不能使用包含您的AJAX代码块的相同.PHP文件。 See this answer。

3. 构建HTML表格的地方在PHP（处理器文件）中。如上所述，构造它都在一个变量中，然后，在结束时，输出该变量：

注意$r变量如何在while循环构造，并且仅在端部回波输出。

$aContact_info = mysql_query("SELECT * FROM `contacts`"); 
$r = '<table>'; 
while ($rrow = mysql_fetch_array($aContact_info)) { 
    $r .= '<tr> 
      <td> 
       Name:<br/> 
       <input type="text" id="first_name" name="first_name" value="'.$rrow['first_name'].'"> 
       <input type="text" id="last_name" name="last_name" value="'.$rrow['last_name'].'"> 
      </td> 
      <td> 
       Email:<br/> 
       <input type="text" id="email" name="email" value="'.$rrow['email1'].'"> 
      </td> 
      <td> 
       Cell Phone:<br/> 
       <input type="text" id="cell_phone" name="cell_phone" value="'.$rrow['cell_phone'].'"> 
      </td> 
     </tr> 
    '; 
} 
$r .= '</table>'; 
echo $r; 

下面是一些例子，应该帮助：.get()和.post()和$.ajax()之间

Simple explanation of AJAX
Example with MySQL lookup in PHP Processor file

---

**差异：

GET vs POST in AJAX calls
Kevin Chisholm
Sychronous AJAX

Answer 2

希望这可以让你开始

$(document).ready(function() { 
    $("#catID").change(function() { 
     $.post("index.php?catname=" + $(this).val(), function (data) { 
      var table = $('<table></table>'); //create table 
      $.each(data, function (index, value) { //loop through array 
       var row = $('<tr></tr>'); //create row 
       var cell1 = $("<td></td>").val(value.CDID); //create cell append value 
       //etc 
       row.append(cell1); //append cell to row 
       table.append(row); //append row to table 
      }); 
      $('#div').append(table); //append table to your dom wherever you want 
     }); 
    }); 
}); 

Answer 3

另一个（较快）的方法是将返回一个HTML表作为一个字符串，并将其注入到DOM。在PHP处理程序中生成表，然后执行$（'＃div'）。load（'/ index.php？catname = catname'）;或者做$ .get like下面

$(document).ready(function() { 
    $("#catID").change(function() { 
     $.get({    
      url: 'index.php', 
      data: { catname: $(this).val() } 
      dataType: 'html', 
      success: function (html) { 
       $('#div').html(html); 
      }, 
      error: function (xhr, err) { displayErrorMessage("Error: \n\nreadyState: " + xhr.readyState + "\nstatus: " + xhr.status + "\nresponseText: " + xhr.responseText, 'nosave'); } 
     }); 
    }); 
});