Question

我已经坚持了一个多星期了。我有一个离线的SQL数据库/网站，浏览器屏幕是分开的，所以底部显示的是完整的表格，有限的细节，你可以点击一行的ID，它应该显示所有数据的样式版本。窗口上半部分的那一行。我知道我需要使用jquery和AJAX来动态完成这个，但我无法弄清楚如何获取行数据。这只适用于一个小型的个人项目，但我对这些东西是一个完全的业余爱好者，我现在真的不在我的身边。

到目前为止，我已经对我的进展做了一个更简单的版本，以说明我遇到的问题：

/* main.css */

body {
    font-family: Helvetica;
    font-size: .8rem;
}

.outer_table {
    position: fixed;
    bottom: 0%;
    top: 50%;
	width: 100%;
    overflow: scroll;

}

.inner_table {
    max-height: 50%;
    margin: 1rem;
}

#tabl1 {
    overflow-x: scroll;
    font-size: .8rem;
}

/* COLUMNS */

#column1{
    border: 1px solid blue;
    float:left; 
    margin:0; 
    width:32%;
    height: 50%;
}
#column2{
    border: 1px solid red;
    float:left; 
    margin:0; 
    width:33%;
    height: 50%;
}
#column3{
    border: 1px solid green;
    float:left; 
    margin:0; 
    width:33%;
    height: 50%;
}

<html>
<?php
$con=mysqli_connect("localhost","root","root","mini");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysqli_query($con,"SELECT * FROM helptable");
?>



<body>

	<div id="column1">
	CONTENT 1
	id goes here
  <?php
    $profile = $_GET['id'];
    echo "<h2>" . $profile . "</h2>"
  ?>
	</div>
	<div id="column2">
	CONTENT 2
	<div id="#view1"></div>
	first name goes here
	</div>
	<div id="column3">
	CONTENT 3
	<div id="#view2"></div>
	surname goes here

	</div>

<div class="outer_table">
    <div class="inner_table">
		<table id="tabl1" class="display" cellspacing="0" width="100%">
			<thead>
				<tr>
					<th>ID</th>
					<th>First Name</th>
					<th>Last Name</th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th>ID</th>
					<th>First Name</th>
					<th>Last Name</th>
				</tr>
			</tfoot>

		<?php
		while($row = mysqli_fetch_array($result))
		{
		echo "<tr>";
		echo "<td><a href=\"?id=" . $row["id"] . "\">" . $row["id"] . "</a></td>";
		echo "<td>" . $row["firstname"] . "</td>";
		echo "<td>" . $row["surname"] . "</td>";
		echo "</tr>";
		}
		echo "</table>";

		mysqli_close($con);
		?>
	</div>
</div>



</body>

以下是SQL表的一个示例.csv，实际上是这样的：

ID，姓名，姓 PP001，约翰·列侬 PP002，保罗·麦卡特尼 PP003，乔治·哈里森 PP004，林檎，斯塔尔

正如你所看到的，我已经设法弄清楚如何将ID转换为可由php代码解释并显示在第1列中的链接，但我无法弄清楚如何使用它来获取其余的行中的信息并动态显示在页面上。单击ID 1链接以及firstName和lastName应分别显示在第2列和第3列中，与表中的所有其他行相同。

我尝试了W3教程中显示的方法，稍微修改它以使用php循环，但最终完全混乱并且不适合。

在寻找可以了解更多内容的任何帮助或帮助时，我们将不胜感激。感谢。

Answer 1

好的，我无法彻底解决，但也许我可以提供帮助。

您是对的，您的 a href 指向的是包含您所需行的ID的请求。好。
现在，您需要将其从 href = \“？id = ... 更改为 href = \”my_ajax.php？id =
请勿点击它！要真正做AJAX，您需要添加Javascript。我看到你在这里没有任何东西，所以这可能是你遗失的一块（你可能会看看this ajax tutorial）
现在您要稍后检查AJAX，只需按照便宜而简单的方式进行操作...根本不做ajax ...只需构建显示您想要的内容的页面（my_ajax.php）。这实际上可以帮助你设想你想要的东西（如果AJAX不可用，它会让你“优雅地降级”。）

Answer 2

问题陈述：

在小表格中显示ID，名字，姓氏。当用户点击表1中的id时，在AJAX的帮助下，详细信息应出现在同一页面上的另一个表中。

理论：

Ajax是一个javascript，可以动态激活php脚本并在PAGE上显示结果。由于AJAX是ajava脚本，因此必须像任何其他函数一样定义它。定义AJAX以及AJAX如何工作的函数称为** AJAX framework **

Ajax框架

ajax.js（通过LINK或SRC将其添加到您的网页）

function ajaxObj(meth, url) {
    var x = new XMLHttpRequest();
    x.open(meth, url, true);
    x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    return x;
}
function ajaxReturn(x){
    if(x.readyState === 4 && x.status === 200){
        return true;    
    }
}

如何使用Ajax？：

HOW_TO_USE.php

<div id="column1"> CONTENT 1 id goes here <?php $profile = $_GET['id']; echo "<a onClick='show_details($id)'>" . $profile . "</a>" ?> </div> <div id='show'></div>

现在定义show_details（）函数

<script> function show_details(x){ var id = x ; var ajax = ajaxObj("POST", "admit_student.php"); ajax.onreadystatechange = function() { if(ajaxReturn(ajax) == true) { document.getElementById("Show").innerHTML = ajax.responseText; } } ajax.send("id="+id); } </script>

现在添加php脚本：

<?php if(isset($_POST['id'])) { $result = mysqli_query($con,"SELECT * FROM helptable"); $Ajax_echo_out = '<table>'; while($row = mysqli_fetch_array($result)) { $Ajax_echo_out = $Ajax_echo_out."<tr>"."<td><a href=\"?id=" . $row["id"] . "\">" . $row["id"] . "</a></td>"."<td>" . $row["firstname"] . "</td>"."<td>" . $row["surname"] . "</td>"."</tr>"; } $Ajax_echo_out= $Ajax_echo_out."</table>"; echo $Ajax_echo_out; exit(); } ?>

如何运作？

简单地我们调用show_details，它激活POST id到同一页面来激活php脚本，然后php echo out结果字符串，最后AJAX.Response（这是来自php函数的echo语句）在SHOW div中作为HTML代码打印出来

Answer 3

您需要检查是否设置了$_GET["id"]，否则从数据库中选择要显示。

测试这个例子：

<html>
<?php
$con=mysqli_connect("localhost","root","root","mini");
// Check connection
if (mysqli_connect_errno())
{
die("Failed to connect to MySQL: " . mysqli_connect_error());
}
if(isset($_GET["id"]) && $_GET["id"] !=""){
$profile = mysqli_real_escape_string($_GET['id']);//or escape whatever
$result = mysqli_query($con,"SELECT * FROM helptable WHERE id=$profile LIMIT 1");
}else{
die("ID Must be defined");
}

?>



<body>

    <div id="column1">
    CONTENT 1
    id goes here
  <?php

    echo "<h2>" . $profile . "</h2>";
  ?>
    </div>
    <div id="column2">
    CONTENT 2
    <div id="#view1"></div>
    first name goes here
    </div>
    <div id="column3">
    CONTENT 3
    <div id="#view2"></div>
    surname goes here

    </div>

<div class="outer_table">
    <div class="inner_table">
        <table id="tabl1" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>ID</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                </tr>
            </tfoot>

        <?php
        while($row = mysqli_fetch_array($result))
        {
        echo "<tr>";
        echo "<td><a href=\"?id=" . $row["id"] . "\">" . $row["id"] . "</a></td>";
        echo "<td>" . $row["firstname"] . "</td>";
        echo "<td>" . $row["surname"] . "</td>";
        echo "</tr>";
        }
        echo "</table>";

        mysqli_close($con);
        ?>
    </div>
</div>



</body>

动态显示SQL表行

3 个答案: