php - PHP网站内数据从MySQL到JSON到AJAX，如何实现？

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>

所以我想看到的结果是单击练习组，例如 ARM ，这将打开接下来的练习，例如二头肌然后onclick我想看带有图片的程序。但我不知道如何改变 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 来训练“name”，然后再打开最后一个列表紧挨着上一个列表，也在同一页上显示说明“exer”和图片“pic”。就像下图所示:

Answer 1

我认为你的问题是你不知道如何在 PHP 中将数据从 MySQL 获取到 JSON，然后以一种可以让你轻松操作的形式将该 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() 函数以及 onclick。

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