Javascript 创建单个div并使用ajax和php填充它们，而无需重复数据

每个城市有10个景点，当我搜索一个城市时，我希望这些景点出现在不同的分区中。例如，我希望大本钟和大本钟的细节出现在屏幕的左侧，然后白金汉宫和它的细节出现在屏幕的右侧。但是，当我单击“搜索”时，数据库中的所有数据都被拉入一个div中，并且由于某种原因，它会一次又一次地重复自己。所以现在屏幕左侧有一个长长的列表

我正在使用ajax和php用数据填充页面。这是我的ajax代码

 $('#submit').on('click', function() {
var search = $('#search').val();

    if ($.trim(search) != '') { //if search is not equal to nothing - using trim allows users to type in blank space and it won't return anything 
        $.post('searching.php', {search: search}, function(data) {
            $('#return').text(data);
    });
    }
 });

这是我的php代码

require_once('config1.php');


$output = '';
if(isset($_POST['search']) === true && empty($_POST['search']) === false){



$query = ("SELECT a.attraction_name, a.lat, a.long, a.cost, a.image FROM zz_attractions a INNER JOIN zz_city c ON a.city_id = c.city_id WHERE c.city_name = '" . mysqli_real_escape_string(trim($_POST['search'])) . "' ");


$result = mysqli_query($conn, $query);
$count = mysqli_num_rows($result);

if ($count == 0) { 
    $output = 'there was no search results';

} else {
    while ($row = mysqli_fetch_array($result)) { 
    $attraction_name = $row['attraction_name'];
    $lat = $row['lat'];
    $long = $row['long'];
    $cost = $row['cost'];
    $image = "<img src='{$row['image']}' height='100' width='100'>";

 echo $output .= '<div>'.$attraction_name.' '.$lat.' '.$long.' '.$cost.' '.$image.'</div>';

    }
}
}

require_once（'config1.php'）；
$output=''；
if（设置（$\u POST['search']）==true和空（$\u POST['search']）==false）{
$query=（“从zz\u景点中选择a.attraction\u name、a.lat、a.long、a.cost、a.image a.city\u id=c.city\u id，其中c.city\u name=”。mysqli\u real\u escape\u字符串（trim（$\u POST['search']））。“”；
$result=mysqli\u查询（$conn，$query）；
$count=mysqli\u num\u行（$result）；
如果（$count==0）{
$output='没有搜索结果'；
}否则{
而（$row=mysqli_fetch_数组（$result））{
$attraction_name=$row['attraction_name']；
$lat=$row['lat']；
$long=$row['long']；
$cost=$row['cost']；
$image=“”；
echo$output.='.$attraction_name.'.$lat.'.$long.'.$cost.'.$image.''.'；
}
}
}

这是我的html分区

<div class="col-md-4">
<div id="return"></div> 

</div>

---

如果有人知道如何将数据分割成单独的div，请告诉我，谢谢

当PHP代码一次发回一堆结果时，您希望如何在几个div之间分配结果？不管怎么说，我不确定你到底想让它怎么工作。你会有两个或三个固定分区，然后将前两个或三个结果放入其中吗？@ChrisG这就是我要问的问题，我不知道如何将我的php和数据库分开，这样我就可以得到一个分区一个分区一个分区一个分区一个分区一个分区。总是会显示10个分区，所以我想创建10个分区，并给他们吸引ID 1，例如attraction2，但我不知道如何将每个吸引分别调用到

while

循环中的单独divDon

echo

。一旦你建立了所有的标记，我会修改PHP代码，让它返回一个只包含数据的数组。您可以使用JSON将数据发送到浏览器。在JS端，迭代接收到的数组并从中构建每个div。修复了循环：