Получение данных 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, которые будут получены в формате 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); 
  

  ?>

• Все выше код работает сама по себе. Но я хочу соединить все это вместе. Я думаю, что это должно быть через событие onchange в jQuery?

• У меня есть alert всплывал после нажатия категории, но это, насколько я могу получить ..

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

Должен ли он быть в foreach цикле? Или a foreach в пределах foreach?

Подводя итог, я пытаюсь понять, как: отображение компакт-дисков и информации кд, которые относятся к определенной категории, которая в настоящее время выбраны, в динамической таблице с помощью AJAX

Любая помощь в широком масштабе оценили.

Answer 1

Вы можете использовать AJAX для этой цели. Ajax позволит вам отправить выбор пользователя (т. Е. Выпадающий список) в фоновый PHP-файл.

Файл PHP обрабатывает полученные данные (то есть по выбору пользователя) и выполняет поиск базы данных на основе этой информации. Это приведет к результату db и построит (в переменной) требуемый HTML для таблицы, а затем echo вернет содержимое этой переменной - которое будет получено в процедуре AJAX success: (или .done() для использования синтаксиса обещаний) ,

INSIDE успех/сделано функция, вы можете использовать полученные данные. Например, вы можете использовать метод jQuery .html() для замены содержимого указанного DIV на полученный вами HTML-код.

Мой подход будет отличаться от других предлагаемых решений в следующих направлениях:

1. Я предпочитаю использовать полный $.ajax() синтаксис, так как она обеспечивает большую структуру, что делает его немного легче понять/манипулировать на первый. Обратите внимание, что .post(), .get() и .load() - все формы быстрого доступа от $.ajax(), которые делают определенные предположения для оптимизации процесса. Сначала предлагаю сначала изучить формат $.ajax(), а затем использовать остальные. Сделав gazillions ajax блокирует себя, я продолжаю использовать $.ajax() в большинстве случаев. Возможно, это предпочтение, но мне гораздо проще использовать/читать/пересматривать - и это также дает дополнительные параметры, которые другие не делают, что делает его более гибким и полезным **.

2. Для использования в качестве процессора ajax необходимо использовать второй .PHP-файл. Вы не можете использовать тот же .PHP-файл, который содержит ваш кодовый блок AJAX. See this answer.

3. Место для построения таблицы HTML находится в PHP (файле процессора). Как уже упоминалось, построить все это в переменной, а затем, в конце концов, вывод, что переменная:

Обратите внимание, как переменная $r построена в то время цикла, и только отражаемый в конце.

$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; 

Вот некоторые примеры, которые должны помочь:

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

---

** Различия между .get() и .post() и $.ajax():

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'); или do $ .get, как показано ниже

$(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'); } 
     }); 
    }); 
});