当使用 ajax 与 php 和 jquery 时，如何循环 json？

Question

我有一个 当有人输入时会显示建议。我正在为其构建后端，以便 ajax 获取数据库中具有该字母序列的前五个标签，并将其显示在特定的

中。我似乎还没有完全成功。这是我做过的第一个Ajax。帮助将不胜感激。以下是适用的 HTML、Javascript 和 PHP。我想我已经很接近了，但不确定如何继续。问题可能出在 javascript 上。

HTML：

<label id="testTagsLabel">Tags:</label>
<input type="text" name="tags" id="testTags" placeholder="Ex: Poem, Edgar Allen Poe">
<div id="tagSuggest">
<ul>
<!--the javascript would add the suggests as list items here-->
</ul>
</div>

PHP：

<?php #create_set.ajax.php

$tagSuggestions = array();

$currentTag = $_POST['sendTag'];

if (!empty($currentTag)){

require_once (MYSQL); //gets the database connection

$enteredTag = mysqli_real_escape_string ($dbc, $currentTag);

$q = "SELECT name FROM tags WHERE MATCH(name) AGAINST('$enteredTag'.'*' IN BOOLEAN MODE) LIMIT 5";
$r = mysqli_query ($dbc, $q) or trigger_error("Query: $q\n<br />MySQL Error: " . mysqli_error($dbc));

if (mysqli_num_rows($r) > 0) {//if there are tags that match what the user typed

while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {

$tag = $row['name'];

$tagSuggestions[] = $tag;

}

echo json_encode($tagSuggestions);

}

}

?>

JavaScript：

$(function(){
      function sendTag(str){
            $.post("../includes/create_set.ajax.php",{ sendTag: str },
            function(data){
                for (var key in data.returnTag) {
                    if(data.returnTag.hasOwnProperty(key)) {
                       $('#tagSuggestTag').html('<li class="tagSuggestTag">' + data.returnTag + "<li>");
                    }
                }
            }, "json");

      }

      $('#testTags').keyup(//on key press in tag field show the send the request and show the suggestions
         function(){
            sendTag($(this).val());
            $('#tagSuggest').show();
         });
});

Answer 1

我不明白 data.returnTag 应该是什么，数据是一个简单的数组。

来迭代它

for(var i =0;i<data.length;++i)

因此，您可以通过 data[i] 使用并访问循环内的项目

$('<li class="tagSuggestTag"/>').appendTo('#tagSuggestTag ul').text(data[i]);

Answer 2

如果我没看错的话，您基本上是在循环中的每一次传递中附加一个相同的

。这似乎是有问题的部分：

for (var key in data.returnTag) {
    if(data.returnTag.hasOwnProperty(key)) {
        $('#tagSuggestTag').html('<li class="tagSuggestTag">' + data.returnTag + "<li>");
    }
}

在这段代码中，您采用了 #tagSuggestTag，我认为它是应该保存建议列表的建议框，然后将其 HTML 内容替换为单个

。你在循环的每一次循环中都这样做。如果我是对的，建议框中最终应该只有 1 项。要解决此问题，请使用 .append() 而不是 .html()。另外，您的建议框选择器（ID）似乎是错误的。

示例：

for (var key in data) {
    $('#tagSuggest ul').apend('<li class="tagSuggestTag">' + data[key] + "<li>");
}

另请注意，您调用的返回值是错误的。当从响应对象获取值时，您正在调用不存在的 data.returnTag ，因为在您的情况下 data 是一个对象数组。因此，您应该迭代 data，而不是 data.returnTag，并使用 data[key] 访问属性。

不过，很可能还有更多问题。