Как вы проходите через json при использовании ajax с php и jquery?

Question

У меня есть <input>, который отображает предложения, когда кто-то набирает его.Я создаю для него бэкэнд так, чтобы ajax захватил первые пять тегов в базе данных, которые имеют эту последовательность букв, и отобразил их в диапазонах, в частности <div>.Кажется, я не совсем преуспел.Это первый 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

Если я правильно понял, вы добавляете один и тот же <li> через каждый проход в цикле.Кажется, это проблемный бит:

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

В этом фрагменте кода вы берете #tagSuggestTag, который, как я полагаю, представляет собой поле для предложений, которое должно содержать список предложений, и заменяете его HTMLсодержание с одним <li>.И вы делаете это каждый проход цикла.Если я прав, у вас должен быть только 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].

Вполне возможно, что проблем больше, чем это.

Answer 2

Я не вижу, что должно быть data.returnTag, данные - это простой массив.

Таким образом, вы можете перебрать его, используя

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

и доступ к элементам внутри цикла через data[i]

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