php - JSON 解析 xmlhttp.requestText

Question

値が選択されると、他の 2 つのフォーム フィールド (短い説明と長い説明)が自動的に入力される、動的なドロップダウン選択を持つフォームがあります。Ajaxを使用して、ドロップダウン選択の値に基づいて短い説明と長い説明を取得しようとしています。xmlhttp.responseTextデータを受信して​​フォーム ページに表示することはできますが、responseText をそれぞれのフォーム フィールドに解析することができません。

「Add New Record」タイトルの上に表示される responseText を確認できます。読みにくいかもしれないので、ここにもう一度：（私は間違ったフォーマットを持っているのではないかと思っていました）

{"Stitl":"CHF STAFF","Ltitl":"Chief Of Staff"}

HTML ファイル:

<form id="addForm" method="post"  action="units_add.php">

 <legend>Add New Record</legend>
     <label for="titleOrg" class="control-label">Title Org</label>
          <select class="form-control" name="titleOrg" id="titleOrg" onChange="populate(this.value)">
               <option value=" "></option>
               <?php
                  while ($rowl1l5s = $l1l5Result->fetch_assoc()) {
                       echo "<option value=". $rowl1l5s['l1l5']. ">";
                       echo $rowl1l5s['l1l5'] . "&nbsp&nbsp&nbsp&nbsp" .$rowl1l5s['Ltitl']; ;
                       echo "</option>";
                  }?>
          </select>

     <label for="shortDesc" class="control-label">Short Desc</label>
          <input name="shortDesc" class="form-control" id="shortDesc" type="text" readonly="readonly">

     <label for="longDesc" class="control-label">Long Desc</label>
          <input name="longDesc" class="form-control" id="longDesc" type="text" readonly="readonly">

     <button type="submit" class="btn btn-default" id="save"><i class="glyphicon glyphicon-ok glyphicon-white"></i> Save</button>

     <a href="FDMAMaint_V10.php"
          <button class="btn btn-default"  id="cancel"><i class="glyphicon glyphicon-remove"></i> Cancel</button>
    </a>
</form>

次に、ユーザーが動的ドロップダウンから値を選択すると、次の JS 関数が実行されます。

function populate(str)
{
     if (str=="")
     {
          document.getElementById("shortDesc").innerHTML="";
          return;

      }

      // Create an object 
      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)
          {

              data = xmlhttp.responseText;

              document.getElementById("messages").innerHTML=xmlhttp.responseText;
              document.getElementById("shortDesc").value=xmlhttp.responseText.shortDesc
              document.getElementById("longDesc").value=xmlhttp.responseText.second;

          }
       }
              xmlhttp.open("GET","getl2l5.php?q="+str,true);
              xmlhttp.send();
 }

次のコード (以下を参照) が正しく参照されておらず、まだ解析されていないため、機能しないことはわかっています。フォームフィールドが「未定義」である理由を参照するために、そこにそれを投げていました

document.getElementById("shortDesc").value=xmlhttp.responseText.shortDesc
document.getElementById("longDesc").value=xmlhttp.responseText.second;

次に、JS 関数は getL2L5 PHP スクリプトに進みます。

<?php

    define('DBHOST','**************');
    define('DBUSER','********');
    define('DBPASS','**********');
    define('DBNAME','**********');

    //Connect to database
    if (!$db = new mysqli(DBHOST, DBUSER, DBPASS, DBNAME)) die("Can't connect to database");

    // Retrieve the value from the title org drop down select 
    $q = $_GET['q']; 

    // Pull the Ltitl and Stitl based on the drop down value
    $sql="SELECT Stitl, Ltitl FROM tl2l5 WHERE l1l5= '".$q."'";

    // Execute the query 
    if (!$result = $db->query($sql))
    {
            die("There was an error running the query [" .$db->error. "]");
    }

    $data = array();
    // Step through the query result and fetch the values
    while ($row = $result->fetch_assoc()) {

            $Stitl = $row['Stitl'];
            $Ltitl = $row['Ltitl'];
            $data = array( 'Stitl' => $Stitl, 'Ltitl' => $Ltitl);
    }
    echo json_encode($data);
?> 

更新:@TimSPQR JSFiddle に感謝し ます。これにより、正しい軌道に乗ることができました。私の問題は私自身の行為であることに気付きました。JSFiddle を使用して値を警告すると、次のvar mydataように表示されました。

それから私は自分のコードに行って変数を警告し、これを得ました:

解決策: html コメントを php コメントとしてマークすると、xmlhttp.responseText で JSON.parse を使用して、正しいフィールド タイトル (例: data.Stitl) を参照する 2 つのフォーム フィールドに入力することができました。