帶有Ajax和Jquery的PHP數組 - 如何從數據創建下拉列表？

這是我第一次使用AJAX和PHP。我寫了一個簡單的登錄頁面（如下）。正如你所看到的，阿賈克斯將用戶名發送到getLocations.php上的模糊，這是我與編碼本網站和YouTube的幫助（我要離開了DB連接位，但它的存在）：帶有Ajax和Jquery的PHP數組 - 如何從數據創建下拉列表？

<!doctype html> 
<html> 
    <head><title>Fetch JSON array Data</title> 
    <script src="http://10.28.1.90/DC_CRM_HOME2_USER_RIGHTS/js/jquery-1.10.2.min.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 

      $("#username").blur(function() { 
       var sendu = $("#username").val(); 

       $.ajax({ 
        type: "POST", 
        url: "getLocations.php", 
        data: "username="+sendu, 
        success: function(response){ 
         $("#result").html(locations+string+jqXHR); 

         //populate select with response...but how? 
          var locations = response.name; 
          for (var i in locations) 
          { 
          var vertical = locations[0]; 

          $('select').append("<option value=\""+vertical+"\">"+vertical+"</option>"); 
          } 
        } 

       }); 
      }); 
     }); 
    </script> 

</head> 
    <body> 

    <form method="post" action="#" onsubmit="return false;"> 
     <input type="username" id="username" name="username" placeholder="username" value="" /><br><p> 
     <input type="password" id="password" name="password" /><br><p> 
     <select name="foo" id="foo"> 
      <option></option> 
     </select><br><p> 
     <input type="submit" id="button" value="Login" /> 
    </form> 

    </body> 
</html>

getLocations.php：

$name  = $_REQUEST['username']; //from ajax request 

$query = "select LOCATION "; 
$query .= "FROM dc_MASTER.DC_CNSLR_ACCESS dca "; 
$query .= "JOIN dc.MEMBERS m ON dca.id = m.id "; 
$query .= "AND m.EMAIL = '$name' "; 

$Sresult = mysqli_query($mysqli, $query); 
    if(! $Sresult) { 
     die("Database query failed: $Sresult"); 
    } 
    $result = array(); 

    while($row = mysqli_fetch_array($Sresult)) 

     $list = array_push($result, array('name' => $row[0])); 

     $c = json_encode(array("result" => $result)); 
     echo $c; 

?>

在這一點上，我的數組是「裝」，我能看到螢火蟲的響應：

{"result":[{"name":"Chenal"},{"name":"Heights"}]}

但是，我似乎無法得到我的選擇選項已填充。我覺得我比這更難（而且我一直在盯着它很長一段時間）。謝謝你們的幫助。

來源

2015-01-26 rdugge

而不是回饋對象的數組，每個它只有一個name屬性，你應該直接返回一個值的數組。你可以用一個簡單的'for'循環來循環。 //你的代碼中肯定有錯誤的是你試圖訪問'response.name'，但你的響應對象沒有這樣的屬性 - 它是'response.result'，並且只有它是一個對象數組。 – CBroe 2015-01-26 18:47:06

請考慮下次對您的問題提供反饋。 – vcanales 2015-01-26 20:08:35

Cbroe ...感謝您的評論。所有這些迴應都非常有幫助。你們很棒... – rdugge 2015-01-27 00:51:51

你必須通過JSON環路由PHP返回：

演示：http://jsfiddle.net/L7a68y26/

var response = {"result":[{"name":"Chenal"},{"name":"Heights"}]} 
var r = response.result; 

for (var i in r) 
{    
    $('select').append("<option value=\""+r[i].name+"\">"+r[i].name+"</option>"); 
}

在背景：

$.ajax({ 
    type: "POST", 
    url: "getLocations.php", 
    data: "username="+sendu, 
    // Added this so jQuery knows what kind of data is being returned 
    dataType: 'json', 
    success: function(response){ 
     var r = response.result; 
     for (var i in r) 
     {    
      $('select').append("<option value=\""+r[i].name+"\">"+r[i].name+"</option>"); 
     } 
    }  
});

來源

2015-01-26 18:53:33 vcanales

Dev，謝謝你的回覆。抱歉，我無法迅速回復... 3歲以下的孩子會變得艱難。這使得總體感覺和工作效果很好。我進行了一次修改，以便在輸入新名稱後清除這些值。 – rdugge 2015-01-27 00:50:01

沒問題，謝謝你回來！經常發生的事情是，當他們得到答案時，傢伙就會消失！ – vcanales 2015-01-27 13:02:31

1）你還沒有告訴jquery你期待返回一個json響應，所以它會將它視爲純文本。

$.post( 
    dataType: 'json' // <<--you need this

就這樣，jQuery將自動解析/的JSON解碼成原生JS數據結構

2）然後，它的循環的一個簡單的事情：

success: function(data) { 
     $.each(data, function(i, opt) { 
      $('select').blahblah + opt.name + blahblah 
     })

論的效率側事情，雖然傳遞數據AS數據有時是個好主意，但是如果你將要用數據做的所有事情都將其填充到表單字段中，那麼最好在服務器上構建HTML並傳遞那直接。

來源

2015-01-26 18:50:00

謝謝馬克...我會給這個投票。欣賞其他選項的幫助和想法 – rdugge 2015-01-27 00:51:03

帶有Ajax和Jquery的PHP數組 - 如何從數據創建下拉列表？

回答

相關問題