1

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

http://jsfiddle.net/AZ4PM/

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

getProjectPhases.php?projectNumber=10000

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

我是 AJAX 新手，想在学习的同时一步一步地从一个简单的示例开始。如果让事情变得更容易，我很乐意使用 jQuery。

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

4

3 回答 3

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">

上面只是调用了 showUser 函数，参数是 projectNumber

然后在下面我有：

<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，但我以我喜欢的方式工作。如果您有任何问题，请告诉我

于 2012-05-29T14:43:58.703 回答
0

将 id 传递给选项选择列表

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

然后调用具有这些的方法，然后通过 Ajax 调用对其进行解析。

var pvalue = document.getElementById('ProjectNumber').value;
var url = 'getProjectPhases.php?projectNumber='+pvalue;
于 2012-05-29T14:28:56.243 回答
0

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

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

getProjectPhases 的输出在哪里data，所以只输出纯文本而不输出 html 标记或其他内容可能是个好主意。

于 2012-05-29T14:30:56.070 回答