javascript - 如何同时通过多个请求将数据从 php 传递到 javascript

Question

我有一个带有搜索引擎的网站，它通过 $.ajax 加载搜索结果，如下所示:

$.ajax({
        type: "GET",
        url: "search_engine.php",
        data: 'value=' + search_text,
        cache: false,
        success: function(results){
            $('#search_results').html(results);    
        },
        error: function(){alert("An error occured ")},
    }) 

PHP 将使用从数据库获取的变量来回显 html 表，例如:

<td class='info'>
     <div class='infoPin'>
          <div class='name'><b><span>$print_name</span></b></div>
          <div class='description'>
               $print_desc
          </div>
     </div>
</td>

这工作正常，但现在我想向与搜索结果相对应的 map 添加标记。虽然我从未使用过 XML，但我知道保存包含所有结果的 XML 文件是一种选择，但我的问题是具有多个搜索的多个用户可以同时访问该网站，因此这可能是一个问题，对吧？

同时我有很多结果，每次只加载其中的一部分并使用多个页面(就像google一样)，这使得无法将数据回显到页面的某个地方，并使用JavaScript来获取信息来自 DOM...

所以基本上，我需要是:

• 在 Javascript 中获取我在 php 中的变量；
• 使用这些参数向 Google map 添加标记；

考虑:

• 搜索结果可以是数百项(表中数百行)；
• 由于结果数量众多，因此仅将其中的一部分加载到 html 页面，但在 map 上应显示与搜索相对应的所有标记；
• 多个用户可以同时访问该网站；

非常感谢!

Answer 1

当您请求搜索数据时，您可以从 PHP 发送回 JSON 数据。假设您有一个包含所有搜索结果的 PHP 数组。然后您可以将其转换为 JSON 字符串，以便您的 jQuery ajax success 函数可以将其转换为对象并对其进行循环。

在 PHP 中:

$results = array(
    0 => array('name' => 'Res1', 'desc' => 'Desc1', 'longitude' => 52.366, 'latitude' => 4.91),
    1 => array('name' => 'Res2', 'desc' => 'Desc2', 'longitude' => 52.511, 'latitude' => 4.90),
    2 => array('name' => 'Res3', 'desc' => 'Desc3', 'longitude' => 52.753, 'latitude' => 4.92),
);
$json = json_encode($results);
print($json);

在 JS 中:

$.ajax({
    type: "GET",
    url: "search_engine.php",
    data: 'value=' + search_text,
    dataType: 'json',
    cache: false,
    success: function(results) {
        var data = $.parseJSON(results);
        if (typeof data === 'object') {
            $('#search_results').empty();
            $.each(data, function(k, v) {
                console.log(v);
                /* Use the v variable (which contains a result as an object) to fill $('#search_results') with data and reinit maps data with long/lat or address data */
            });
        }
    },
    error: function() { alert("An error occured "); },
});

要填充您的 #search_results 元素，请查看 .append jQuery 的功能。