php - Json 在我的列表框中获取 "Undefined"值

Question

用户需要点击 Actor 列表中的 Actor 。删除现有的电影片名，然后只删除与所选类型转换演有关的电影片名。

在选择 Actor 后，我的“dvdtitle”列表框收到“未定义”列表。但是，我使用 $('#actor').text(data) 检查了来自 json_encode 函数的响应数据，使其可视化，我确实得到了正确的结果。

[{"503":"Caught In The Crossfire"},
{"690":"Dead Man Running"},
{"1064":"Get Rich Or Die Trying"},
{"1145":"Gun"},{"1254":"Home of The Brave"},
{"2184":"Righteous Kill"},
{"2519":"Streets Of Blood"},
{"3273":"Twelve"}]

我不知道我做错了什么。

//getactors.php
include("includes/connection.php");

$q = $_POST['input'];
$final_array = array();

$resultActor = mysql_query("SELECT id, title, plot, catagory, release_date, rated FROM dvd WHERE actors LIKE '%".$q."%' ");

while($rowActor = mysql_fetch_array($resultActor)) {
    $final_array [] = array( $rowActor['id']   => $rowActor['title'] ); 
}

echo json_encode($final_array); 


// JavaScript Document
$('#actorsname').click(function(){

    var actorValue = $('#actorsname option:selected').text();
    $.ajax({
        type: "POST",
        url: 'getactors.php',
        data: {input: actorValue},
        cache: false,
        datatype: "json",
        success: function(data) {
            $('#dvdtitle option').each(function(i, option) {
                $(option).remove();    // Empty DVD Listbox
            });

            $('#actor').text(data);   //  to visualy check my json Data

            $.each(data, function(i, j) { 
                var row = "<option value=\"" + i.value + "\">" + j.text + "</option>";
                $(row).appendTo("select#dvdtitle");
            });
        }
    });
});

Answer 1

问题是您的 Ajax 返回的对象包含一个键/值对，其中电影 ID 作为键，电影标题作为值。这使得检索数据更加困难，因为您不知道 each循环查找哪个 ID。

理想情况下，您的 JSON 格式应该改为:

[
    {"id":503,"title":"Caught In The Crossfire"},
    {"id":690,"title":"Dead Man Running"}
]

这将允许您检索 each 中的数据循环使用 j.id和 j.title因为 JSON 使用“id”和“title”作为键。但是因为您没有以这种方式组织它，所以您需要遍历对象的每个键/值对。

理想情况下，您希望将 PHP 更改为:

$final_array[] = array(
    'id' => $rowActor['id'],
    'title' => $rowActor['title']
);

并使用 j.id和 j.title (例如 var row = "<option value=\"" + j.id + "\">" + j.title + "</option>"; )。

这是一个没有修改您的 PHP 代码的示例:这个例子是基于你上面的例子。 data变量是您的 Ajax 请求中收到的内容。

// This is the data retrieved using Ajax.
var data = [{"503":"Caught In The Crossfire"},{"690":"Dead Man Running"},{"1064":"Get Rich Or Die Trying"},{"1145":"Gun"},{"1254":"Home of The Brave"},{"2184":"Righteous Kill"},{"2519":"Streets Of Blood"},{"3273":"Twelve"}];

// Loop through each object in the data array.
$.each(data, function(key, movie)
       {
           // Because the ID is a key and the title a value, we can't determine the ID/title unless we loop through each one of the key/value pairs in the object. Each movie only has one key/value pair so this won't be a problem.
           $.each(movie, function(id, title)
                  {
                      $('<option />').attr('value', id).text(title).appendTo('select#dvdtitle')
                  });
       });

jsFiddle:http://jsfiddle.net/j7HGr/

我希望这是有道理的。

PS:您可能还想更改 $q=$_POST['input'];使用 mysql_real_escape_string 以防止 SQL 注入(inject)。