AJAX 入门 - 通过 PHP 更新表单答案

【问题标题】：Getting Started with AJAX - Updating Form via PHPAJAX 入门 - 通过 PHP 更新表单
【发布时间】：2012-05-29 14:22:37
【问题描述】：

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

http://jsfiddle.net/AZ4PM/

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

getProjectPhases.php?projectNumber=10000

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

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

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

【问题讨论】：

标签： php ajax forms jquery

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

【讨论】：

【解决方案2】：

将 id 传递给选项选择列表

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

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

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

【讨论】：

【解决方案3】：

首先你需要将 JQuery change() Handler 绑定到你的下拉菜单，调用一个启动 ajax 请求的函数，看看 jQuery get function 你需要做这样的事情：

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

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

【讨论】：