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

Dynamically generate a string from a form, to pass to PHP file loaded via AJAX

本文关键字：AJAX 文件 PHP 加载 字符串 动态 表单 一个      更新时间：2023-09-26

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只传递下拉列表的选择。我不知道如何使用多个表单项并构建字符串。

对于每个表单项，给出一个唯一的id，然后对于每个项调用updateTable函数，但在调用该函数时不传递值，例如：

现在像这个一样修改您的updateTable函数

function updateTable(){
var str = 'color = '+ document.getElementById('colorField').value;
    str += 'something = '+ document.getElementById('somethingField').value;
//now carry on your ajax stuff
}
相关文章：