从 db 中获取所有以单击字母、HTML、JS、PHP、MySQL 开头的数据答案

【问题标题】：Get all data from db which start with clicked letter, HTML, JS, PHP, MySQL从 db 中获取所有以单击字母、HTML、JS、PHP、MySQL 开头的数据
【发布时间】：2015-06-12 23:35:37
【问题描述】：

为了解决这个问题，我必须显示 db 中所有以单击字母开头的电影。到目前为止，我有 collection.sql 和 db_collection.php，它们都可以正常工作。此外，从 index.php 进行所有渲染（下面的 index.php 中还有几行）也可以。但现在我想将 /gui 部分与 index.html、app.js、style.css 和 /interface 部分与 index.php 和 db_collection.php 分开。因此，我想在单击每个字母时从 app.js 调用 index.php，使用 index.php 检查 db 中是否有单击的字母的电影，然后在 html 中显示来自响应的所有数据。

此外，我根本没有使用 php 的经验，也许我从一开始就走错了路。

gui/index.html:

    <html>
    <head>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body onload="indexMovies()">
        <div id="container"></div>
    </body>
    </html>

gui/app.js

function indexMovies(){
    var c = document.getElementById('container');
    c.innerHTML = '';
    c.appendChild(header);
    var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
    alphabet.forEach(function(letter) {
        var sign = document.createElement('a');
        sign.className = "node";
        sign.href = "index.html?sign="+letter;
        sign.onclick = get("index", letter);
        sign.innerHTML = letter;
        c.appendChild(sign);
        var border = document.createElement('span');
        border.innerHTML = " | ";
        c.appendChild(border);
    });
}
function get(addr, sign){
    var url = "../interface/" + addr + ".php?sign=" + sign;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", url, true);
    xmlhttp.send(); 
    return false;
}

【问题讨论】：

问题是什么？

标签： javascript php html mysqli

【解决方案1】：

首先，我认为如果这是一个练习是可以的，但你不应该使用 javascript 在 PHP 可用的环境中显示字母，使用 PHP 更有意义，因为 SEO 和用户将如何看到这页纸。始终尝试直接从服务器渲染第一个版本。

话虽如此，我也认为您应该管理来自 PHP 代码的 JSON 响应。如果您还没有尝试过，我建议您学习 REST API 和 PHP 框架，例如 Laravel，它非常适合这种情况。通过这种方式，您确实可以实现将服务器代码和接口代码分开的目标。所以我会像这样重新编码 PHP 部分：

<?php

include ("db_connection.php");

header("Content-type: application/json");

$sign = $_GET['sign'];
$rows = [];
/*
empty() checks for isset AND if variable is not null or '' or 0
otherwise if you ask for empty letter (can happen with a JS bug)
then you'll be returning all from database.
The other expression is for getting just one letter
to prevent SQL injection
*/
if (!empty($sign) && preg_match("/^[a-zA-Z]{1,1}$/",$sign)) {
  $queryTpl =
    "SELECT
      cover, title, relese_year, duration
    FROM
      movies
    WHERE
      title LIKE '".$sign."%'
    ORDER BY
      title";
  $result   = mysqli_query($db, $query_tpl);
  $rows     = mysqli_fetch_all($result, MYSQLI_ASSOC);
}
echo json_encode($rows);

exit;

我建议使用 jquery，为简洁起见，我将使用它，如果您了解 JS，将其转换为它不会有任何问题。因此，html 看起来像：

<html>
  <head>
    <title></title>
  </head>
  <body>
    <div id="container"></div>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
  </body>
</html>

像这样的 JS 部分（接口必须在 HTML 的上一级，如果你想在服务器中隐藏 PHP，你可以使用路由解决这个问题）：

//try to keep things in your own scope
(function(){

  function indexMovies()
  {
    var c = document.getElementById('container');
    c.innerHTML = '';
    c.appendChild(header);
    var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
    alphabet.forEach(function(letter) {
      var sign = document.createElement('a');
      sign.className = "node";
      sign.href = "index.html?sign="+letter;
      sign.onclick = get("index", letter);
      sign.innerHTML = letter;
      c.appendChild(sign);
      var border = document.createElement('span');
      border.innerHTML = " | ";
      c.appendChild(border);
    });
  }

  function get(addr, sign)
  {
    var url = "/interface/" + addr + ".php?sign=" + sign;
    $.ajax({
      'url': url
    })
    .done(function( data ) {
      var container = $('#container');
      var html = '<table>';
      if ( data.length==0 ) {
        html += '<tr>';
        html += '<td>No movie with this start sign</td>';
        html += '</tr>';
      }
      else {
        for (var i in data) {
          html += buildMovieHtml(data[i]);
        }
      }
      html += '</table>';

      container.html(html);
    });
    return false;
  }

  function buildMovieHtml (element)
  {
    var html = '';
    html += '<tr>';
    html += '  <td><img src="covers/'+ element.cover +'" height="278" width="185"</td>';
    html += '</tr>';
    html += '<tr>';
    html += '  <td>'+ element.title +' ('+ element.relese_year +')</td>';
    html += '</tr>';
    html += '<tr>';
    html += '<td>Runtime: '+ element.duration +' min</td>';
    html += '</tr>';

    return html;
  }

})();

你已经完成了。

【讨论】：

必须在js中做，这就是练习所说的。并且不能使用任何 ex 库，纯 js，php ......谢谢，我希望它会有所帮助
好吧，在这种情况下，这里的解决方案应该可以工作，只需用普通的 javascript 替换 jQuery 就可以了。

【解决方案2】：

你不需要sign.href = "index.html?sign="+letter;

另外，您将get("index", letter); 的输出返回到sign.onclick，而不是将其包装在一个函数中，以便为该函数分配 onclick 属性。

sign.onclick = function() {
    get('index',this.textContent);
}

整体看起来像这样

function indexMovies(){
    var c = document.getElementById('container');
    c.innerHTML = '';
    c.appendChild(header);
    var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
    alphabet.forEach(function(letter) {
        var sign = document.createElement('a');
        sign.className = "node";
        sign.onclick = function() {
            get('index',this.textContent);
        }
        sign.innerHTML = letter;
        c.appendChild(sign);
        var border = document.createElement('span');
        border.innerHTML = " | ";
        c.appendChild(border);
    });
}

【讨论】：