jQuery replacewith在单击单元格后使用Ajax获取数据 [英] jquery replacewith to get data with Ajax after click on a cell
问题描述
我正在研究一个我想使用的代码，如下所示: 有一个html表A，用户可以单击一行的第一个单元格. 单击将导致jquery的replacewith-function.在mysql数据库中获得用户ID或关键字进行搜索之前，用户已经从该单元格单击了该单元格.例如，用户单击ID为1.然后，该功能将开始搜索具有相同ID的条目.
am working on a code which I want to use as follow: there is a html table A and the user can click on the first cell of a row. The click causes a replacewith-function with jquery. From the cell the user had clicked before he got the id or a keyword for the search in the mysql database. For example the user clicks on an ID which is 1. Then the function would start searching for an entry with the same id.
我已经有一个代码，但是认为必须有一个错误.有人可以帮忙吗? 顺便说一句:如果您真的不明白我的意思，请随时问我.
I have a code already, but think there must be a mistake. Anybody here who can help? By the way: if you don't really understand what I mean, don't hesitate to ask me.
<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ünchen</td>
</tr><tr>
<td>Miljö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ünchen</td>
</tr><tr>
<td>Miljö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
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".但这是行不通的.我可以看到桌子.但是没有预期的数据输出.
EDITED *UPDATED* Okay, I now changed some code lines. Generally I would say I get 'str'. But it doesn't work. I can see the table. But without the expected data output.
<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如下:
The getuser_exp.php is following:
<?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".这是正确的结果. 我看到我必须学习很多东西.我试图找到一个很好的教程，但没有找到解决问题的方法.
Problem must be in the script, but why? I displayed 'var str' in a div. It was the right result. I see that I have to learn much. I tried to find a good tutorial, but not what I am looking for to solve the problem.
希望任何人都可以提供帮助.
Hope anyone can help.
推荐答案
您的代码很奇怪.我认为您的问题来自您的Javascript/jQuery.
Your code is very odd. I assume your problem is coming from your Javascript/jQuery.
您的代码未使用我可以看到的回调函数，因此我将更改您的代码以在XMLHTTPRequest完成后进行更新:
Your code is not using a callback function that I can see, so I would change your code to update after the XMLHTTPRequest is finished:
$( "#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);
});
});
这篇关于jQuery replacewith在单击单元格后使用Ajax获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
