Question

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

当我对所有内容进行硬编码时，它的工作正常，因此这是一个良好的开端。问题是，我需要根据用户在表单上选择的内容动态生成查询字符串，然后在AJAX调用期间将其传递给PHP文件，以将正确的内容提取到DIV中。查询字符串需要更新，并且每次用户更改表单上的内容时都需要进行调用。因此，例如，如果用户勾选一个颜色为“蓝色”的框，我需要在字符串上添加“+ blue”并重新发送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文件只接受字符串，并且工作正常。正如您可能已经猜到的那样，问题在于此形式仅适用于一件事（颜色）。使用this.value只是通过该下拉列表的选择。我不知道如何使用多个表单项并构建字符串。

Answer 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
}

从表单动态生成一个字符串，传递给通过AJAX加载的PHP文件

1 个答案: