javascript - 从循环 php 追加数据

Question

我在从循环附加数据时遇到问题。我试图附加单击的结果，但是当有多个结果时，每个结果都会在单击时附加。我正在使用 ajax 来检索搜索结果。下面是我的 php 部分。我认为问题在于每个结果都有相同的类，因此它会附加每个结果，但我不知道如何仅识别一个

if(isset($_POST['inviteSearch'])) {

include_once "connect.php";

$con = getConnection();
$search = "%{$_POST['inviteSearch']}%";

$query = "SELECT FirstName,LastName FROM `Profiles` WHERE FirstName LIKE ? OR LastName LIKE ? ";
$stmt = $con->prepare($query);
$stmt->bind_param("ss", $search ,$search);

if(!($stmt->execute())) {

    die(mysql_error());    

} else {

    $result = $stmt->get_result();

    $output = '<ol>';
    if(mysqli_num_rows($result) > 0) {
        while($row = mysqli_fetch_assoc($result)){

            $name = $row['FirstName'] . " " . $row['LastName'];

            $output .= "
            <li id='invitetoken'>

            <p>$name</p>

            </li>
            <script>
            $(document).ready(function(){
                $('#invitetoken').click(function(){
                    $('.invitedSection').show();
                    $('.invitedList').append('<li><p>$name</p><button>&times;</button></li>');
                });
            });
            </script>

            ";

        }
    } else {
        $output .= "<h3>We could not find $search</h3>";
    }
    $output .= '</ol>';
    echo "$output";

}
}

Answer 1

首先，请使用当前容易受到 SQL 注入(inject)攻击的参数化查询。

您在 while 循环中重复附加相同的 js，这通常是不好的做法。我将对此进行一些分解，因为您同时遇到了 php 和 JS 问题

PHP

这里只是一般性地清理和使用参数化查询和基于类的 mysqli(与上面的建议评论一致)。我还将 javascript 移出循环，因为一遍又一遍地重复它不会实现任何目标。显然还没有测试我的更改，但它们相当样板(请参阅 the docs )

if (!isset($_POST[''inviteSearch']) {
  return;
}

$connection = new mysqli('host', 'user', 'password', 'schema');
$param = filter_input(INPUT_POST, 'inviteSearch', FILTER_SANITIZE_STRING);

// setup query
$query = "SELECT CONCAT(FirstName, ' ', LastName) AS name
  FROM Profiles
  WHERE (FirstName LIKE ? OR LastName LIKE ?)";

// prepare statement
$stmt = $connection->prepare($query);
// need variable bind for each tokenized parameter
$stmt->bind_param('ss', $param, $param); 
$stmt->execute();
$results = $stmt->get_result();

$output = makeOutput($results);

// Siloing your presentational elements for clarity.
function makeOutput($results) {
  if ($results->num_rows === 0) {
    return "<h3>We could not find $search</h3>";
  }

  $output = '<ol>';
  while ($row = $results->fetch_assoc()) {
    $output .= "<li class='invitetoken'><p>{$row['name']}</p></li>";
  }
  $output .= '</ol>';

  return $output;
}

JavaScript

这里有一些事情，将函数封装到 IIFE 中保持 namespace 包含在内，通常是一个很好的做法。对单击处理程序的更改使回调可以动态处理所单击的任何匹配类的更新。我引用 this (在这种情况下，将 this 视为 event.target 会很有帮助)并使用它来查找要附加的名称。从那里开始，它与您已经拥有的非常相似。值得注意的是，我使用 let 进行变量定义和字符串数据的模板文字语法，但您应该查找它们的可用性并决定是否需要担心旧浏览器支持:)。

(function($) {
  $(document).ready(function(){
    $('.invitetoken').on('click', function() {
      let name = $(this).children('p').text()
      ,   string = `<li><p>${name}</p><button>&times;</button></li>`;

      $('.invitedSection').show();
      $('.invitedList').append(string);
    });
  });
})(jQuery);