Question

我有一个简单的HTML表单，以选择菜单开始，用户可以从项目列表中进行选择。我在这里用HTML表单创建了一个简单的JSFiddle：

http://jsfiddle.net/AZ4PM/

我想要发生的是，当用户从列表中选择时，它触发要执行的php脚本，该脚本从他们选择的ProjectNumber获取值并将其作为参数传递，例如，如果我选择项目A，则URL为：

getProjectPhases.php？projectNumber = 10000

这个php脚本将返回一个新的表格单元格，然后我想将其作为表格中的第二个单元格出现。它包含一个新的选择菜单，其值根据第一个选择菜单中的选择而变化。这个php页面手动运行良好，但是现在我需要在用户从项目编号菜单中进行选择时触发它。

我是AJAX的新手，并希望在我学习的同时从一个简单的例子开始一步一步。如果能让事情变得更轻松，我很乐意使用jQuery。

感谢任何指向我需要包含的基本元素的指针（假设至少有一个js文件等）。

Answer 1

我使用的东西非常相似：

<select name="selectProject" id="selectID" onChange="showUser(this.options[selectedIndex].value)">

    <?php
        // Loop through and list each project
        foreach ($var as $row) {
            echo '<option value="'.$row['projectNumber'].'">'.$row['projectName'].'</option>';
        }
    ?>

</select>

<label>Project Name</label>
<input id="projectName" type="text" class="span3" name="projectName">

以上只是使用参数projectNumber

调用showUser函数

然后，我有：

<SCRIPT TYPE="text/javascript">

    // Function to fill in form fields
    function showUser(str)
    {
    if (str=="")
      {
      document.getElementById("").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)
        {
            var obj = eval('(' + this.responseText + ')');


            document.getElementById("projectName").value=obj.projectname;
        }
      }
    xmlhttp.open("GET","http://url.com/ajax/"+str,true);
    xmlhttp.send();
    }
</SCRIPT>

此脚本将调用url url.com/ajax/whateverIdIsSelected

在该页面中，您希望对查询执行任何操作。

至于要返回的内容，我将此设置为使用json，我为什么要使用该行

 var obj = eval('(' + this.responseText + ')');

this.reponseText是从ajax页面返回的内容。我的回电看起来像这样

$projectData = json_encode($project);

echo $projectData;

其中$ project是一个包含项目属性的数组。

我对ajax或js不太满意，但我按照我喜欢的方式工作。如果您有疑问，请告诉我

Answer 2

将ID传递给选项列表

<select name="ProjectNumber" id="ProjectNumber">

然后调用具有这些的方法，然后通过Ajax调用解析它。

var pvalue = document.getElementById('ProjectNumber').value;
var url = 'getProjectPhases.php?projectNumber='+pvalue;

Answer 3

首先，您需要将JQuery change()处理程序绑定到下拉菜单，调用启动ajax请求的函数，查看需要执行以下操作的jQuery get function：

$.get("getProjectPhases.php", { projectNumber: this.val() }, function(data){
   //Update your output using the data var
);

其中data是getProjectPhases的输出，因此最好只输出纯文本而不输出任何html标签。

AJAX入门 - 通过PHP更新表单

3 个答案: