使用 Ajax 和 Jquery 的 PHP 数组 - 如何从数据创建下拉列表 - PHP array with Ajax and Jquery - How to create dropdown from the data?

PHP array with Ajax and Jquery - How to create dropdown from the data?

这是我第一次使用AJAX和PHP。我写了一个简单的登录页面（下面）。如您所见，Ajax 会将用户名发送到 getLocations.php 在 blur 上，我在本网站和 youtube 的帮助下对其进行了编码（我省略了数据库连接位，但它就在那里）：

<!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>

获取位置.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;
?>

此时，我的数组已"加载"，我能够在 firebug 中看到响应：

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

但是，我似乎无法填充我的选择选项。我觉得我正在使它变得比它应该的更难（而且我已经盯着它看了很长时间）。谢谢你们的帮助。

你必须遍历 PHP 返回的 JSON：

演示：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>");
        }
    }    
});

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并直接传递它。