0

A 有一个价格比较网站，在侧边栏中有一个用户输入表单。当用户开始使用表单（勾选复选框、单选按钮等）时，我需要根据用户正在检查的选项动态更新页面的主要内容区域（比较表）。目前，我正在使用 AJAX 将 PHP 文件的内容加载到内容区域的 DIV 中。PHP 文件只有一个 PHP 查询，用于从数据库中提取内容，然后将其输出。这不是 MySQL 查询，它是我使用的价格比较包的 PHP 调用，只是使用诸如“+blue +widget min_price=10 max_price=200”等参数。然后由包处理 MySQL 查询。

当我对所有内容进行硬编码时，它工作得很好，所以这是一个好的开始。问题是，我需要根据用户在表单上选择的内容动态生成查询字符串，然后在 AJAX 调用期间将其传递给 PHP 文件，以将正确的内容拉入 DIV。查询字符串需要更新，并且每次用户更改表单上的内容时都需要进行调用。因此，例如，如果用户勾选了颜色“蓝色”的框，我需要在字符串中添加“+蓝色”并重新发送 AJAX 调用。如果他们取消勾选蓝色，我需要删除“+蓝色”并重新发送 AJAX 调用等。等等。

在这一点上，我已经超出了我的深度，所以如果你有任何关于如何实现这样的目标的指导，我将不胜感激......

目前，我有这个：

被更新的内容 div 称为“pbDiv”。

阿贾克斯：

<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 文件只接受字符串，并且工作正常。正如您可能已经猜到的那样，问题在于这种形式仅适用于一件事（颜色）。使用 this.value 只会传递该下拉列表的选择。我不知道如何使用多个表单项并构建一个字符串。

4

1 回答 1

0

为每个表单项提供一个唯一的 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 回答