0

データベースからロードされたコンテンツにコンテンツを更新するためのチュートリアルに従っています。

私の計画は、さまざまな EP 画像カバーをデータベースからロードすることです。クリックすると、同じページの Div にその情報 (トラック タイトル、アーティストなど) が入力されます。

このチュートリアルに従って、必要な詳細を表示するように少し修正しました。_GET() メソッドを使用し、変数の受け渡しを期待どおりに変更しますが、マウス座標も渡すようですが、そうではありませんこれは問題になるはずですが、なぜそれが行われているのかわからないのですか?

ページが読み込まれると、期待どおりに画像が表示され、コンテンツの読み込みを試みているように見えますが、それを達成していないようです。

ボタンが画像で、値が非表示のフォームフィールドである場所に適応させるのは間違っていると確信していますが、私のニーズに特化したチュートリアルを見つけることができませんでした.

これが私のコードです：

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>
4

1 に答える 1

0

1 つの問題は、id が要素でのみ定義されているのに対し、this.valueの onclick ハンドラーから渡していることです。同様に value 属性を追加してみてください。<input type="image"><input type="hidden"><input type="image">

もう 1 つの懸念事項は、URL の変更です。これは AJAX 呼び出しで発生するべきではありません。発生した場合、これは AJAX 呼び出しが実行されていないことを示しています。この場合、これは が<input type="image">送信ボタンのように動作し、ユーザーが画像をクリックしたポイントの座標とともにフォーム内の値を渡すためです。ボタンがクリックされ、AJAX 呼び出しが開始され、AJAX 呼び出しが戻る前にフォームが送信されます。このformタグには属性がないためaction、現在のページ (ajaxtest1.php によって提供される) が想定され、ajaxtest1.php が読み込まれ、ajaxtest2.php への呼び出しが再び聞かれることはありません。

フォームが送信されないようにするには、次の 2 つの方法のいずれかを実行できます。まず、フォーム タグを に変更することで、フォームを送信しないように指示できます<form onsubmit="return false;">。2 番目に、おそらく簡単なのは、AJAX 呼び出しを実行しているだけなので、そもそもフォームが必要ないことを認識することです。これを行うために必要なのはimg、onclick ハンドラーを含む通常のタグだけです。

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 呼び出しを実行します。

于 2013-10-23T13:43:12.307 に答える