Данные из MySQL в JSON в AJAX на сайте PHP, как?

Question

У меня сегодня действительно амбициозная проблема, потому что я хочу достичь чего-то нелепо глупого, но удовлетворяющего.По сути, у меня есть база данных с данными для упражнений в тренажерном зале

CREATE TABLE IF NOT EXISTS `gp_progs` (
  `prog_id` int(3) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(20) NOT NULL,
  `exer` varchar(250) NOT NULL,
  `pic` varchar(15) NOT NULL,
  PRIMARY KEY (`prog_id`),
  UNIQUE KEY `prog_id` (`prog_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;

--
-- Dumping data for table `gp_progs`
--

INSERT INTO `gp_progs` (`prog_id`, `name`, `exer`, `pic`) VALUES
(1, 'ABS', 'TO DO ABS YOU NEED TO DO THIS AND THAT', 'abs.jpg'),
(3, 'Arms2', 'this is what we want', 'abs.jpg'),
(7, 'Biceps', 'curls', 'abs.jpg');

Я обработал ее после многочасового копания кода с этим кодом в PHP

$jsondb = "data/prog.json";
$q = "SELECT * FROM gp_progs";
$r = @mysqli_query ($dbc, $q);
/*$json = array();
while ($row = mysqli_fetch_assoc($r)){
    $json[] = $row;
    }

$jsondata =  json_encode($json, JSON_PRETTY_PRINT);
if(file_put_contents($jsondb, $jsondata)) {
            echo 'Data successfully saved';
        }

Это дало мнеФайл json, из которого я действительно хочу создать функциональное приложение AJAX, подобное этому.JS:

$(function() {                                    // When the DOM is ready

  var times;                                      // Declare global variable
  $.ajax({
    beforeSend: function(xhr) {                   // Before requesting data
      if (xhr.overrideMimeType) {                 // If supported
        xhr.overrideMimeType("application/json"); // set MIME to prevent errors
      }
    }
  });

  // FUNCTION THAT COLLECTS DATA FROM THE JSON FILE
  function loadTimetable() {                    // Declare function
    $.getJSON('data/events.json')              // Try to collect JSON data
    .done( function(data){                      // If successful
      times = data;                             // Store it in a variable
    }).fail( function() {                       // If a problem: show message
      $('#event').html('Sorry! We could not load the timetable at the moment');
    });
  }

  loadTimetable();                              // Call the function


  // CLICK ON THE EVENT TO LOAD A TIMETABLE 
  $('#content').on('click', '#event a', function(e) {  // User clicks on event

    e.preventDefault();                                // Prevent loading page
    var loc = this.id.toUpperCase();                   // Get value of id attr

    var newContent = '';                               // Build up timetable by
    for (var i = 0; i < times[loc].length; i++) {      // looping through events
      newContent += '<li><span class="time">' + times[loc][i].time + '</span>';
      newContent += '<a href="data/descriptions.html#';
      newContent += times[loc][i].title.replace(/ /g, '-') + '">';
      newContent += times[loc][i].title + '</a></li>';
    }

    $('#sessions').html('<ul>' + newContent + '</ul>'); // Display times on page

    $('#event a.current').removeClass('current');       // Update selected item
    $(this).addClass('current');

    $('#details').text('');                             // Clear third column
  });

  // CLICK ON A SESSION TO LOAD THE DESCRIPTION
  $('#content').on('click', '#sessions li a', function(e) { // Click on session
    e.preventDefault();                                     // Prevent loading
    var fragment = this.href;                               // Title is in href

    fragment = fragment.replace('#', ' #');                 // Add space after#
    $('#details').load(fragment);                           // To load info

    $('#sessions a.current').removeClass('current');        // Update selected
    $(this).addClass('current');
  });


  // CLICK ON PRIMARY NAVIGATION
  $('nav a').on('click', function(e) {                       // Click on nav
    e.preventDefault();                                      // Prevent loading
    var url = this.href;                                     // Get URL to load

    $('nav a.current').removeClass('current');               // Update nav
    $(this).addClass('current');

    $('#container').remove();                                // Remove old part
    $('#content').load(url + ' #container').hide().fadeIn('slow'); // Add new
  });

});

HTML:

<section id="content">
      <div id="container">
        <h2>Upcoming Events in Yorkshire</h2>

        <div class="third">
          <div id="event">
            <a id="sh" href="sh.html"><img src="img/sheffield.fw.png" alt="Sheffield, South Yorkshire" />Sheffield</a>
            <a id="hu" href="hu.html"><img src="img/hull.fw.png" alt="Hull, East Yorkshire" />Hull</a>
            <a id="ls" href="ls.html"><img src="img/leeds.fw.png" alt="Leeds, West Yorkshire" />Leeds</a>
            <a id="yk" href="yk.html"><img src="img/york.fw.png" alt="York, West Yorkshire" />York</a>
          </div>
        </div>
        <div class="third">
          <div id="sessions">
            <p>Select an event from the left</p>
          </div>
        </div>
        <div class="third">
          <div id="details"></div>
        </div>

      </div><!-- #container -->
    </section><!-- #content -->


    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/events.js"></script>

Итак, результат, который я хочу увидеть, - это нажать на группу упражнений, например, на Оружие, которая откроет следующие упражнения, например, бицепс, и затем нажмитеЯ хочу увидеть программу с картинками.Но я не могу узнать, как изменить JS, так что это даст мне то, что я хочу.Потратил на это уже 13 часов и до сих пор ничего не могу найти в Интернете.

Если что-то не понятно, пожалуйста, дайте мне знать, так как я все еще учусь использовать переполнение.

Заранее спасибо!

Это для веб-сайта PHP с использованием JS, MySQL, Google API и HTML, конечно.

Редактировать: Если это было не слишком ясно, я хочу получить данные MySQL в JSON (который яуже сделали)

[
{
"prog_id": "1",
"catg": "chest",
"name": "Chest",
"exer": "Three exercises per muscle group. Chest: Bench Press (3 sets of 10), Chest cable fly(3 sets of 10) and dumbbell fly (3 sets of 10)",
"pic": "abs.jpg"
}
]

И теперь я хочу использовать его в AJAX в виде: на странице я хочу видеть Группы - 'catg', который при нажатии откроет список рядом с группой на той же страницес Muscle, чтобы тренировать «имя», которое впоследствии открывает последний список рядом с предыдущим также на той же странице, показывая Descirption «exer» и Picture / s «pic».Как на картинке ниже:

Answer 1

Я думаю, что ваша проблема в том, что вы не знаете, как передать данные из MySQL в JSON на PHP, а затем передать этот JSON в Javascript в форме, которая позволяет легко манипулировать им.

Вот как я это делаю. Ключевым моментом здесь является использование str_replace.

PHP, используя мою собственную функцию SQL () для получения результирующего набора через fetch_all (MYSQLI_ASSOC):

$subcategorydata =
  SQL("select * from subcategoryoptions order by category, subcategoryoption");
$subcategories = 
  str_replace('\\"','\\\\"',
  str_replace("'","\'",
  json_encode($subcategorydata)));

Javascript (в моем случае прямой, а не через ajax):

var subcategories = '<?php echo $subcategories; ?>';
var jsonSubcategories = JSON.parse(subcategories);
for (var row in jsonSubcategories) { ....

РЕДАКТИРОВАТЬ: дополнительный код для загрузки 2 слоев, включение / выключение отображения нижнего уровня в соответствии с кликами пользователя. Эта версия предполагает, что вы извлекли все данные из MySQL за один раз (я просто жестко запрограммировал их) - вы, вероятно, захотите использовать ajax для динамической загрузки материала на практике - и мой код определенно не оптимален, но это должно сделать работу.

За главным div, в который загружаются данные, следует javascript для его загрузки. Обратите внимание на функции hide (), show (), toggle () и set () и щелчок мышью.

<div id=main></div>

<script>
function set(div, value) {
    document.getElementById(div).innerHTML = value;
}

function hide(div) {
    var x = document.getElementById(div);
    x.style.display = "none";
}

function show(div) {
    var x = document.getElementById(div);
    x.style.display = "block";
}

function toggle(div) {
    var x = document.getElementById(div);
    if (x.style.display === "none") { show(div); } else { hide(div); }
}

var json='[{"heading":"This is the first heading","detail":"This is the first detail"},{"heading":"This is the second heading","detail":"This is the second detail"}]';
var jsonData = JSON.parse(json);

var html = '';
for (var row in jsonData)
  {
  html += '<div id=hdr' + row + ' onclick=toggle(\'dtl' + row + '\')>';
  html += '<b>' + jsonData[row].heading + '</b></div>';
  html += '<div id=dtl' + row + '>' + jsonData[row].detail + '</div>';
  }
set('main','Click on the headings to toggle the detail<br>' + html);
for (var row in jsonData)
  {
  hide('dtl' + row);
  }
</script>

Answer 2

у вас уже есть имя изображения в записях, и вы должны также знать, что на сервере можно найти изображения.

Вы можете объединить эти знания и создать URI из пути и имени файла