开始使用AJAX - 通过PHP更新表单 [英] Getting Started with AJAX - Updating Form via PHP

问题描述

我有一个选择菜单，用户可以从项目列表中选择启动一个简单的HTML表单。我创建了一个简单的jsfiddle这里的HTML表单：

I have a simple HTML form which starts with a select menu where the user can select from a list of Projects. I've created a simple JSFiddle with the HTML form here:

http://jsfiddle.net/AZ4PM/

我想发生的是，当用户从列表中选择它触发一个要执行的PHP脚本这需要从ProjectNumber的价值，他们已经选择，并将此作为一个参数，例如：如果我选择项目A的网址是：

What I would like to happen is that when the user selects from the list it triggers a php script to be performed which takes the value from the ProjectNumber they have selected and passes this as a parameter, e.g. if I select Project A the URL would be:

getProjectPhases.php？projectNumber = 10000

getProjectPhases.php?projectNumber=10000

该PHP脚本将返回一个新的表格单元格，我会那么喜欢出现在表单中的第2个单元。它包含的价值观改变取决于第一选择菜单中选择一个新的选择菜单。这个PHP页面运作良好手动，但我在点，现在，我需要把它触发当用户从项目编号菜单中进行选择。

This php script will then return a new table cell which I would then like to appear as the 2nd cell in the form. It contains a new select menu with the values changing depending on the selection in the first select menu. This php page is working well manually, but I'm at the point now where I need to have it triggered when the user makes a selection from the Project Number menu.

我是新来的AJAX，想开始一个简单的例子，一步步的时间，而我学习。我很高兴地使用jQuery如果让事情变得更容易。

I'm new to AJAX and would like to start with a simple example one step at a time whilst I learn. I'm happy to use jQuery if that makes things easier.

鸭preciate任何指针哪些基本要素，我需要包括（假设至少一个js文件等）。

Appreciate any pointers to what the basic elements I need to include (assuming at least one js file etc).

推荐答案

我有非常类似的东西，我使用的：

I have something very similar that I use:

<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功能

The above just calls the showUser function with the parameter that is the 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

This script will call the url url.com/ajax/whateverIdIsSelected

在这个页面，你想干什么就干什么，你必须做你的查询。

From that page, you want to do whatever you have to do with your query.

至于返回什么，我有这个设置为使用JSON，这是我为什么我行

As for what to return, I have this set up to use json, which I why I have the line

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

this.reponseText是从AJAX页面返回。我回电话看起来像这样

this.reponseText is what is returned from the ajax page. My return call looks like this

$projectData = json_encode($project);

echo $projectData;

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

Where $project is an array containing your project's attributes.

我不是很好用Ajax或JS，但我得到这个工作，我喜欢的方式。让我知道如果您有任何疑问

I'm not very good with ajax or js, but I got this working the way I like it. Let me know if you have questions

这篇关于开始使用AJAX - 通过PHP更新表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！