Question

我一直在关注一个旨在将内容更新为从数据库加载的教程。

我的计划是从数据库中加载各种EP图像，如果点击它们，则同一页面上的Div将填充其信息（曲目标题，艺术家等）。

我已经按照本教程略微修改它以显示我想要的细节，它使用_GET（）方法和url更改，因为我希望显示变量传递，但它似乎也传递了鼠标坐标，这不应该是一个问题，只是不确定它为什么这样做？

当页面加载时，它按预期显示图像，它似乎尝试加载内容但似乎没有实现。

我确定这是我出错的地方，在按钮是图像的地方进行修改，价值是隐藏的表格字段，但我找不到特定于我需要的教程。

这是我的代码：

ajaxtest1.php：

<head>
//MySQL connection script

<script>
function showep(str)
{
if (str=="")
  {
  document.getElementById("ep").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","ajaxtest2.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>

<body>
<div id="ep">
Text text text
</div>
<?php

$query = "SELECT * FROM releases";
$result = mysql_query($query);

if(!$result) die ("Database access failed: " .mysql_error());

$rows = mysql_num_rows($result);

  for ($j = 0 ; $j < $rows ; ++$j)


  {

$row = mysql_fetch_row($result);
$id = $row [0];



echo '<form>';
echo '<input type="hidden" name="id" value="' . $id .'" />';
echo '<input type="image" src="images/releases/' .$row[1] .'" width="150" height="150" onclick="showep(this.value)"/>';
echo '</form>';

  }
?>
</body>

ajaxtest2： //这里是MYSQL连接脚本

if(!$result) die ("Database access failed: " .mysql_error());

$row = mysql_fetch_row($result);


echo    "<pre>";
echo    "<img src='images/releases/"    .$row[1] . "' width= '150' height= '150' /><br />";
echo    "track title: "         .$row[2] . "<br />";
echo    "artist: "               .$row[3] . "<br />";
echo    "track length: "                .$row[4] . "<br />";
echo    "Remixes by: " .$row[5] . " " . $row[6] . " " . $row[7] . "<br />";
echo    "Released: "                      .$row[8] . " ";
echo    "</pre>";

mysql_close($db_server);
?>
</body>
</html>

Answer 1

一个问题是您从this.value的onclick处理程序传递<input type="image">，而id仅在<input type="hidden">元素上定义。尝试将value属性添加到<input type="image">。

另一个值得关注的问题是url更改：这是AJAX调用中不应该发生的事情，如果确实如此，这表明没有执行AJAX调用。在这种情况下，这是因为<input type="image">的行为类似于提交按钮，将表单中的值与用户单击图像的点的坐标一起传递。单击该按钮，启动AJAX调用，并在AJAX调用返回之前提交表单。由于form标记没有action属性，因此假设当前页面（由ajaxtest1.php提供），ajaxtest1.php加载，并且再也听不到对ajaxtest2.php的调用。

要保持表单不被提交，您可以执行以下两项操作之一。首先，您可以通过将表单标记更改为<form onsubmit="return false;">来指示表单不提交。其次，也许更容易，就是认识到你首先不需要表单，因为你只是在执行一个AJAX调用。要做到这一点，您只需要一个带有onclick处理程序的常规img标记。

tl; dr - 更改：

echo '<form>';
echo '<input type="hidden" name="id" value="' . $id .'" />';
echo '<input type="image" src="images/releases/' .$row[1] .'" width="150" height="150" onclick="showep(this.value)"/>';
echo '</form>';

为：

echo '<img src="images/releases/' .$row[1] .'" width="150" height="150" onclick="showep(' . $id .')"/>';

您将执行AJAX调用而不是表单提交。

Ajax PHP变量传递

1 个答案: