开始使用AJAX - 通过PHP更新表单表单、AJAX、PHP

2023-09-10 21:08:14 作者:我知道坚强对于我的意义x

我有一个选择菜单,用户可以从项目列表中选择启动一个简单的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