1

ユーザーがプロジェクトのリストから選択できる選択メニューで始まる単純な HTML フォームがあります。ここでは、HTML フォームを使用して単純な JSFiddle を作成しました。

http://jsfiddle.net/AZ4PM/

私がしたいことは、ユーザーがリストから選択すると、選択した ProjectNumber から値を取得し、これをパラメーターとして渡す php スクリプトが実行されることです。たとえば、プロジェクト A を選択すると、URL は次のようになります。 :

getProjectPhases.php?projectNumber=10000

この php スクリプトは、フォームの 2 番目のセルとして表示したい新しいテーブル セルを返します。最初の選択メニューでの選択に応じて値が変化する新しい選択メニューが含まれています。この php ページは手動でうまく機能していますが、ユーザーが [プロジェクト番号] メニューから選択したときにトリガーする必要があるところまで来ています。

私は AJAX が初めてなので、学習しながら簡単な例を 1 ステップずつ始めたいと思います。jQuery を使用すると作業が簡単になる場合は、喜んで使用します。

私が含める必要がある基本的な要素へのポインターに感謝します(少なくとも1つの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">   

上記は、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 があまり得意ではありませんが、好きなように動作させることができました。ご不明な点がございましたらお知らせください

于 2012-05-29T14:43:58.703 に答える
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 に答える