jquery replacewith 在单击单元格后使用 Ajax 获取数据

Question

正在编写我想使用的代码，如下所示： 有一个 html 表 A，用户可以单击一行的第一个单元格。 单击会导致带有 jquery 的替换功能。从用户在获得 mysql 数据库中搜索的 id 或关键字之前单击的单元格。例如，用户单击 ID 为 1。然后该函数将开始搜索具有相同 ID 的条目。

我已经有代码了，但我认为肯定有错误。这里有人可以帮忙吗？ 顺便说一句：如果你真的不明白我的意思，不要犹豫，问我。

<html>
<head>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
$( "#mytable tr td:first-child" ).click(function() {
    $( "#yourtable" ).replaceWith( function showUser(str)
        {
            if (str=="")
                {
                    document.getElementById("txtHint").innerHTML="";
                    return;
                }
            if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
            else
                {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
            xmlhttp.onreadystatechange=function()
                {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                }
        }
    xmlhttp.open("GET","getuser.php?q="+str,true);
    xmlhttp.send();
}

</script>


</head>
<title></title>


<body>


<table border="1" rules="groups" id="mytable">
  <thead>
    <tr>
      <th>Assoziation 1</th>
      <th>Assoziation 2</th>
      <th>Assoziation 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td><i>betroffen:<br>4 Mio. Menschen</i></td>
      <td><i>betroffen:<br>2 Mio. Menschen</i></td>
      <td><i>betroffen:<br>1 Mio. Menschen</i></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>M&uuml;nchen</td>
    </tr><tr>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr><tr>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr>
  </tbody>
</table>

<table border="1" rules="groups" id="yourtable">
  <thead>
    <tr>
      <th>Assoziation 1</th>
      <th>Assoziation 2</th>
      <th>Assoziation 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td><i>betroffen:<br>4 Mio. Menschen</i></td>
      <td><i>betroffen:<br>2 Mio. Menschen</i></td>
      <td><i>betroffen:<br>1 Mio. Menschen</i></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>M&uuml;nchen</td>
    </tr><tr>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr><tr>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr>
  </tbody>
</table>


</body>
</html>

getuser.php

 <?php
$q = intval($_GET['q']);
//$q = 2;

$con = mysqli_connect('localhost','root','','boerse');
if (!$con)
  {
  die('Could not connect: ' . mysqli_error($con));
  }


$sql="SELECT * FROM orders WHERE share_id = '".$q."' GROUP BY time DESC LIMIT 1";

$result = mysqli_query($con,$sql);

echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

while($row = mysqli_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['usr_id'] . "</td>";
  echo "<td>" . $row['share_id'] . "</td>";
  echo "<td>" . $row['amount'] . "</td>";
  echo "<td>" . $row['price'] . "</td>";
  echo "<td>" . $row['ordertype'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysqli_close($con);
?> 

已编辑 *已更新* 好的，我现在更改了一些代码行。一般来说，我会说我得到'str'。但它不起作用。我可以看到桌子。但没有预期的数据输出。

<html>
<head>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.min.js"></script>



<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<?
$con = mysqli_connect('localhost','root','','boerse');
$sql="SELECT short, name FROM markets";
        $result = mysqli_query($con,$sql);

?>




    <div class="markets">

<?
echo "<table>
<thead border='0'>
<tr>
<th>Index</th>
<th>Name</th>
</tr>
</thead>
<tbody border='1'>";
while($row = mysqli_fetch_array($result))
  {
  echo "<tr>";
  echo "<td class='nr'>".$row['short']."</td>";
  echo "<td>" . $row['name'] . "</td>";
  echo "<td class='information'>Use</td>";
  echo "</tr>";
  }
echo "</tbody></table>";
?>
<div class="clicked_info" name="users" onchange="showUser(this.value)">Hello</div>  
    </div>
<br><br>

<div id="txtHint"><b>Info will be listed here.</b></div>


<script>

$(".information").click(function () {
  var str = $(this).closest("tr").find(".nr").text(); //thank you David
  $.get("getuser_exp.php", {q:str}, function(data){ 
        $("#txtHint").replaceWith(data);

    });

}); 



</script>

</body>
</html>

getuser_exp.php 如下：

 <?php
$q = intval($_GET['q']);
//$q = 'SP500';

$con = mysqli_connect('localhost','root','','boerse');
if (!$con)
  {
  die('Could not connect: ' . mysqli_error($con));
  }


$sql="SELECT * FROM markets WHERE short = '".$q."'";

$result = mysqli_query($con,$sql);

echo "<table border='1'>
<tr>
<th>id</th>
<th>name</th>
<th>short</th>
<th>category</th>
</tr>";

while($row = mysqli_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['id'] . "</td>";
  echo "<td>" . $row['name'] . "</td>";
  echo "<td>" . $row['short'] . "</td>";
  echo "<td>" . $row['category'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysqli_close($con);
?> 

问题一定出在脚本中，但为什么呢？我在 div 中显示了“var str”。这是正确的结果。 我看到我必须学习很多。我试图找到一个好的教程，但不是我要解决的问题。

希望任何人都可以提供帮助。

Answer 1

你的代码很奇怪。我假设您的问题来自您的 Javascript/jQuery。

您的代码没有使用我可以看到的回调函数，所以我会在 XMLHTTPRequest 完成后更改您的代码以更新：

$( "#mytable tr td:first-child" ).click(function() {

    //I'm not sure where you are getting str from, but get it before you call this:

    $.get("getUser.php", {q:str}, function(data){

        //data holds what getUser.php echoes
        $("#yourTable").replaceWith(data);

    });

});