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

我没看到data.returnTag应该是什么，数据是一个简单的数组。

所以你可以使用

迭代它

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

并通过data[i]

访问循环内的项目

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

Answer 2

如果我正确阅读，你基本上会在循环中的每个传递中追加一个<li>。这似乎是有问题的一点：

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

在这段代码中，您选择了#tagSuggestTag，我认为这是应该包含建议列表的建议框，并且您使用单个<li>替换它的HTML内容。你每次循环都会这样做。如果我是对的，你应该在建议框中只有一个项目。要解决此问题，请使用.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]访问属性。

尽管有很多问题，但很有可能。

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

2 个答案: