php - 单独获取ajax json数据

Question

我的代码有一个小问题，可以说我有一个像这样的 json：

[{"img":"john.png","name":"John","username":"@john"},
{"img":"mark.png","name":"mark","username":"@mark"}]

我想把数据组织起来：

约翰@john john.png

标记@mark mark.png

但是每次数据都是这样出来的：

约翰·马克 @john @mark john.png mark.png

这是我的 PHP 代码：

<?php
class search{
    public function gettingvalues($search_value){
        require_once('conx.php');
        $dir = "usersimage/";
        $sql = "SELECT name,img,username FROM users WHERE username like '$search_value%' || name like '$search_value%'";
        $query = mysqli_query($conx,$sql);
        if ($query) {
            if (mysqli_num_rows($query) > 0) {
                while ($row = mysqli_fetch_array($query)) {
                    $img = $row['img'];
                    $name = $row['name'];
                    $username = $row['username'];
                    $json = array('img' => $img, 'name' => $name, 'username' => $username);
                    $results[] = $json;
                }
                echo json_encode($results);
            }
        }
    }
}
?>

这是索引代码：

<?php

    if (isset($_POST['data'])) {
        require('search.php');
        $search = new search;
        $search->gettingvalues($_POST['data']);
        header('Content-Type: application/json; charset=utf-8');
        die();
    }
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('input').keyup(function(){
            var value= $('input').val();
            $.ajax({
                type: "POST",
                url: "",
                data: {data: value},
                datatype: "json",
                success: function(json_data) {
                  var img = [];
                  var username = [];
                  var name = [];
                  $.each(json_data, function(index, element) {
                    img.push(element.img);
                    username.push(element.username);
                    name.push(element.name);
                  })
                  $('#feedback').html('');
                  $('#feedback').html(name+username+img);
                }
            });
        });
    });
</script>
<input type="text" name="search" placeholder="looking for?">
<div id="feedback"></div>

实际上这是我第一次使用 json，我不知道是什么问题，或者我错过了一些东西，我希望能得到一些答案。

标签： phpjsonajax

Answer 1

您需要按照希望显示的顺序构建 HTML。

var html = '';
$.each(json_data, function(index, element) {
    html += `${element.name} ${element.username} ${element.img}<br>`;
}
$("#feedback").html(html);