从循环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注入攻击的参数化查询。

你在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中以保持其名称空间包含，通常是一种很好的做法。对单击处理程序的更改允许回调动态处理所单击的任何匹配类的更新。我引用了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);