0

サイドバーにユーザー入力フォームがある価格比較Webサイトがあります。ユーザーがフォーム（チェックボックス、ラジオボタンなど）を使い始めると、ユーザーがチェックしているオプションに応じて、ページのメインコンテンツ領域（比較表）を動的に更新する必要があります。現在、私はAJAXを使用して、PHPファイルのコンテンツをコンテンツ領域のDIVにロードしています。PHPファイルには、データベースからコンテンツをプルして出力するためのPHPクエリが含まれています。これはMySQLクエリではなく、「+ blue + widget min_price = 10 max_price = 200」などの引数を使用するだけで、私が使用する価格比較パッケージのPHP呼び出しです。MySQLクエリはパッケージによって処理されます。

すべてをハードコーディングすると、正常に機能するので、それは良いスタートです。問題は、ユーザーがフォームで何を選択しているかに応じてクエリ文字列を動的に生成し、AJAX呼び出し中にPHPファイルに渡して、適切なコンテンツをDIVにプルする必要があることです。クエリ文字列を更新する必要があり、ユーザーがフォームで何かを変更するたびに呼び出しが発生する必要があります。したがって、たとえば、ユーザーが「青」の色のボックスにチェックマークを付けた場合、文字列に「+青」を追加して、AJAX呼び出しを再送信する必要があります。青のチェックを外す場合は、「+ blue」を削除して、AJAX呼び出しなどを再送信する必要があります。

私はこの時点で私の深さを超えているので、このようなことを達成する方法についてのガイダンスをいただければ幸いです...

現在、私はこれを持っています：

更新されるコンテンツdivは「pbDiv」と呼ばれます。

AJAX：

<script type="text/javascript">
function updateTable(str)
{
if (str=="")
  {
  document.getElementById("pbDiv").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("pbDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","http://MYSITE//pricebox.php?q="+str,true);
xmlhttp.send();
}
</script>

形：

<form>
<select name="colour" onchange="updateTable(this.value)">
<option value="">Select a colour:</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select>
</form>

PHPファイルは文字列を受け取るだけで、正常に機能します。ご想像のとおり、問題は、このフォームが1つのもの（色）に対してのみ機能することです。this.valueを使用すると、そのドロップダウンの選択が渡されます。複数のフォームアイテムを使用して文字列を作成する方法がわかりません。

4

1 に答える 1

0

フォームアイテムごとに1つの一意のIDを指定し、次にアイテムごとにupdateTable関数を呼び出しますが、関数の呼び出し中に値を渡さないでください。例::

次に、updateTable関数を次のように変更します

function updateTable(){
var str = 'color = '+ document.getElementById('colorField').value;
    str += 'something = '+ document.getElementById('somethingField').value;
//now carry on your ajax stuff
}
于 2012-09-04T11:31:27.477 に答える