繁体   English   中英

Ajax PHP变量传递

[英]Ajax PHP variable passing

我一直在遵循一个教程,该教程旨在将内容更新为从数据库加载的内容。

我的计划是从数据库中加载各种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>

一个问题是您是从<input type="image">的onclick处理程序传递this.value的,而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调用,而不是提交表单。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM