Question

这是我第一次使用AJAX和PHP。我写了一个简单的登录页面（如下）。正如您所看到的，Ajax会将模板上的用户名发送到getLocations.php，我在本网站和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>

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;

?>

此时，我的数组已被加载＆＃34;并且我能够在萤火虫中看到响应：

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

但是，我似乎无法填充我的选择选项。我觉得我要比现在更努力（而且我已经盯着它看了很长一段时间）。谢谢你的帮助。

Answer 1

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

Answer 2

你必须遍历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>");
        }
    }    
});

使用Ajax和Jquery的PHP数组 - 如何从数据创建下拉列表？

2 个答案: