搜索结果上的动态链接答案

【问题标题】：Dynamic Link on search result搜索结果上的动态链接
【发布时间】：2015-09-30 19:15:21
【问题描述】：

我想在点击任何搜索结果后自动填写 id=id、name、email、company.. 的 div。搜索结果中的 id 用作过滤器以从 Mysql 中获取适当的行数据来自 search.php 中使用的同一个表

这是我的表格

<link href="../action/css/onlinecustom.css" rel="stylesheet"     type="text/css">
<script src="http://code.jquery.com/jquery-1.10.2.js"  type="text/javascript"></script>
<script src="./action/scripts/global2.js" type="text/javascript"></script> 

<script>
function searchq() {
    var searchTxt = $("input[name='search']").val();

     $.post("../action/subs/search.php/", {searchVal: searchTxt}, function(output) {
         $("#output").html(output);
     });
 }

</script>

<title>Search</title>

<body>
<form action="http://comiut.com/index.php/user-records" method="post">
  <input type="text" name="search" Placeholder="enter the search    criteria..." onkeydown="searchq();"/>
  <input type="submit" value ="serach"/>

</form>
//Serach result//
<div id="output"> </div>

//Data to populate upon click on any search result//
    <div id="id"></div> 
    <div id="name"></div>
    <div id="email"></div>
    <div id="company_name"></div>

</body>

** 我创建了一个 global2.js 文件 **

jQuery('body').on('click', 'a.resultItem', function(e) {
e.preventDefault();
jQuery.ajax({
    url: "http://onlinepcdoc.com/action/subs/getItem.php",
    method: 'post',
    data : jQuery(this).data('id') // see the data attribute we used above in the a tag we constructed
}).done(function(data) {
    jQuery("#id").html(data.id);
    jQuery("#name").html(data.name);
    jQuery("#email").html(data.email);
    jQuery("#company_name").html(data.company);
   });
});

我还创建了 search.php

<?php 

    include '../db/connect6.php';


if(isset($_POST['searchVal'])) {
  $searchq = $_POST['searchVal'];
  $searchq = preg_replace ("#[^0-9a-z]#i","",$searchq);

  $query = mysql_query("SELECT * FROM oz2ts_users WHERE oz2ts_users.id LIKE '%$searchq%' OR oz2ts_users.name LIKE '%$searchq%'") or die("Could not search"); 
  $count = mysql_num_rows($query);
  if($count == 0){
     $output = 'There is no result to show!'; 
       } else{ 
        while($row = mysql_fetch_array ($query)) {
            $id = $row['id'];
            $name = $row['name'];
            $username = $row['username'];    

      $output .= '<div><a class="resultItem" data-id="' . $id . '">'   
       . $name . ' '.$username.'</a></div>';   

   }            
 }

 }
echo($output);
?>

** 这里是getItem.php **

<?php

include '../db/connect6.php';

if(isset($_POST['id'])) {
    $id = intval($_POST['id']);
    $result = mysqli_query("SELECT oz2ts_users.id, oz2ts_users.name,    oz2ts_users.username,  oz2ts_users.email FROM oz2ts_users WHERE oz2ts_users.id =      $id") or die("Could not search"); 
    // since we expect only one result we don't need a loop
    $row = mysqli_fetch_assoc($result);
    // let's return the $row in json format
    // first let's prepare the http header
    header('Content-Type: application/json');
    // and now we return the json payload
    echo json_encode($row);
}

?>

【问题讨论】：

Your script is at risk for SQL Injection Attacks.
如果可以的话，你应该stop using mysql_* functions。 These extensions 已在 PHP 7 中删除。了解PDO 和 MySQLi 的 prepared 语句并考虑使用 PDO，it's really not hard。
谢谢你会改成MySQLi

标签： javascript php mysql

【解决方案1】：

你走在正确的道路上，虽然你自己没有尝试过任何事情，但这里有一些东西可以让你继续前进：

您应该返回类似的内容并填充您的搜索结果列表

$output .= '<div><a class="resultItem" data-id="' . $id . '">'   
           . $name . ' '.$username.'</a></div>';

接下来，您需要一个额外的 ajax 调用来填充底部信息，所以这里是 javascript 位，请注意 click 事件使用 body on 构造绑定到动态创建的元素的方式：

$('body').on('click', 'a.resultItem', function(e) {
    e.preventDefault();
    $.ajax({
        url: "getItem.php",
        method: 'post',
        data : $(this).data('id') // see the data attribute we used above in the a tag we constructed
    }).done(function(data) {
        $("#id").html(data.id);
        $("#name").html(data.name);
        $("#email").html(data.email);
        $("#company_name").html(data.company);
    });
});

现在你只需要getItem.php，它可以是这样的：

<?php
include '../db/connect6.php';

if(isset($_POST['id'])) {
    $id = intval($_POST['id']);
    $result = mysqli_query("SELECT id,name,email,company FROM yourtable WHERE yourtable.id = $id") or die("Could not search"); 
    // since we expect only one result we don't need a loop
    $row = mysqli_fetch_assoc($result);
    // let's return the $row in json format
    // first let's prepare the http header
    header('Content-Type: application/json');
    // and now we return the json payload
    echo json_encode($row);
}

【讨论】：

谢谢亚历克斯。我做了你建议的一切。当我将鼠标悬停在项目上时，我得到了搜索结果，但没有链接。我错过了什么？
当我检查一行结果时，我得到了这个。 choou choudja
你去，你有每个项目的链接，现在你可以点击它
你有什么改变吗？还是不行。没有链接，当我点击任何项目时什么都没有发生。我将在下面发布我所做的一切
我编辑了我最初的帖子以展示我所做的事情。它仍然不起作用。请你有 1 分钟的时间看看我是否做错了什么？