javascript - Mysql OR 语句使用 AJAX 返回数组中的所有行名称值，然后在 Google Maps API V3 中加载多个标记

Question

我对我的 MySQL 查询有疑问，因为当我搜索生日、年龄、性别等内容时，它无法返回结果，但当我搜索姓名和姓氏时，它只返回一个结果。

JavaScript/AJAX 代码:

$(document).ready(function () {
$("#searchDataToMarker").keyup(function () {
    var value = $(this).val();
    $.ajax({
        type: "POST",
        url: "<?php echo base_url('Maps/mapSearchDataInMarker') ?>",
        data: {
            'searchDataToMarker': value
        },
        dataType: "JSON",
        success: function (searchMapDataResult) {
            if (searchMapDataResult.length !== null || $('searchDataToMarker').value !== '' || searchMapDataResult['latlong'] !== '') {
                //we need to check if the value is the same
                $("#searchResult").html(searchMapDataResult['lname']);
                console.log(searchMapDataResult['lname']);
                console.log(searchMapDataResult['latlong']);
                var latlong = parseFloat(searchMapDataResult['latlong']);
                var myLatLong = new google.maps.LatLng(7.289600,125.678066);
                var iw = new google.maps.InfoWindow();
                var myOptions = {
                    zoom: 15,
                    center: myLatLong,
                    mapTypeId: google.maps.MapTypeId.HYBRID
                },
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                var markerOptions = {
                    map: map,
                    position: myLatLong
                };
                marker = new google.maps.Marker(markerOptions);
                //for (var i = 0, length = searchMapDataResult.length; i < length; i++) {
                google.maps.event.addListener(marker, "click", function () {
                    iw.setContent(searchMapDataResult['lname']);
                    iw.open(map, marker);
                });
            //}
            } else {
                $("#searchResult").html('');
                alertify.alert('Search result empty.').set('modal', false);
                return;
            }
        }
    });
});
});

我的 Controller 使用 codeigniter:

class Maps extends CI_Controller() {
public function __construct() {
parent::__construct();
$this->load->Model('Login_model');
$this->load->Model('Maps_model');
}

public function mapSearchDataInMarker() {
if (isset($_POST['searchDataToMarker'])) {
    $searchData = $_POST['searchDataToMarker'];
    $query = $this->db->query("SELECT * FROM resident WHERE name LIKE '%{$searchData}%' OR mname LIKE '%{$searchData}%' OR lname LIKE '%{$searchData}%' OR gender LIKE '%{$searchData}%' OR bday LIKE '%{$searchData}%' OR age LIKE '%{$searchData}%' OR citizenship LIKE '%{$searchData}%' OR occupation LIKE '%{$searchData}%' OR status LIKE '%{$searchData}%' OR purok LIKE '%{$searchData}%' OR resAddress LIKE '%{$searchData}%' OR perAddress LIKE '%{$searchData}%' OR email LIKE '%{$searchData}%' OR telNum LIKE '%{$searchData}%' OR cpNum LIKE '%{$searchData}%'");
    foreach ($query->result() as $searchResult) {
        echo json_encode($searchResult);
    }
} else {
    echo '';
}
}
}

我的观点:我只想搜索 MySQL 数据库中的任何内容，当输入与数据库中的内容之一匹配时(在姓名、中间名、姓氏、性别、年龄、生日等列中) ，它返回一个结果数组，然后在 Google Maps API V3 中精确定位所有匹配结果。

Answer 1

这里存在三个问题:首先，mapSearchDataInMarker()存在SQL注入(inject)漏洞，您需要了解如何使用CI安全地注入(inject)参数。

其次，您只能返回一个 JSON 字符串，但您却回显了多个字符串。

最后，如果没有结果，您将回显空字符串，但这不是有效的 JSON。

$results = array();
if (isset($_POST['searchDataToMarker'])) {
    $searchData = $_POST['searchDataToMarker'];
    // @todo Fix security vulnerability
    $query = $this->db->query("
        SELECT * FROM resident
            WHERE name LIKE '%{$searchData}%'
            OR mname LIKE '%{$searchData}%'
            OR lname LIKE '%{$searchData}%'
            OR gender LIKE '%{$searchData}%'
            OR bday LIKE '%{$searchData}%'
            OR age LIKE '%{$searchData}%'
            OR citizenship LIKE '%{$searchData}%'
            OR occupation LIKE '%{$searchData}%'
            OR status LIKE '%{$searchData}%'
            OR purok LIKE '%{$searchData}%'
            OR resAddress LIKE '%{$searchData}%'
            OR perAddress LIKE '%{$searchData}%'
            OR email LIKE '%{$searchData}%'
            OR telNum LIKE '%{$searchData}%'
            OR cpNum LIKE '%{$searchData}%'
    ");
    foreach ($query->result() as $searchResult) {
        $results[] = $searchResult;
    }
}

echo json_encode($results);

我猜您现在需要修改此 JavaScript:

success: function (searchMapDataResult) {

改为接受数组。由于您使用的是 jQuery，因此您可以使用其 each 迭代器来处理每个项目:

success: function (searchMapDataResults) {
    $.each(searchMapDataResults, function(searchMapDataResult) {
        // Original code here
    });

注意，为了便于阅读，我也重新格式化了查询。我建议您也改进缩进。

<小时/>

编辑:我已经尝试过直接通过 URL (Maps/mapSearchDataInMarker) 进行实时 AJAX 操作，我得到了以下结果:

A PHP Error was encountered

Severity: Notice

Message: Undefined variable: results

Filename: controllers/Maps.php

Line Number: 482

Backtrace:

File: /home/ubuntu/workspace/application/controllers/Maps.php Line: 482 Function: _error_handler

File: /home/ubuntu/workspace/index.php Line: 292 Function: require_once null

请允许我第五次提及，如果您检查此 AJAX 端点的原始响应，您将看到此输出。由于这不是有效的 JSON，因此在 JavaScript 中检查它没有任何值(value)。 您是否在浏览器中使用网络监视器？

从您的代码来看，这似乎是问题所在 - 您的数组变量初始化已被注释掉。

//        $results = array();

编辑:我还注意到，在 POST 操作期间，响应没有正确的 HTTP header ，而且据我所知，您只返回一条记录。要解决 header 问题，请在解决上述变量问题后，在 echo 之前使用它:

header('Content-Type: application/json');

此外，您似乎需要首先调试传递给 AJAX 操作的值 - 它在实时应用程序中始终为 null。

还有很多需要调试的地方!