如何根据查询结果“突出显示” div？

Question

我正在为游戏开发一个小应用程序。 该应用程序包括显示给定怪物的位置。我有一个包含怪物、地图和怪物所属地图的数据库。

现在应用程序几乎可以工作了，例如，如果用户写“Poring”，则会出现 html 中的列表，其中包含地图名称和地图 ID。

反正我也有一个游戏世界的格子，格子里的每一个方格都是一张地图，每个格子都有一个特定的id。

所以，假设我正在应用程序中寻找“Poring”。

现在它将显示以下列表：

map: Prontera Field 07 map_id: prt_fild07
map: Prontera Field 08 map_id: prt_fild08

但我想要的不是显示该列表，而是突出显示 div（或添加任何类型的 CSS）到 id="prt_fild07" 和 id="prt_fild08" 的 div。

我知道我需要使用 AJAX，但我不确定如何使用，因为我正在学习 JQuery，但无论如何，现在我正在使用 AJAX 来显示列表。

这是 JQuery 代码：

    $('#ro-form').submit(function(e){
        e.preventDefault(); //Prevent default submission

        $.ajax({
            url: 'files/php/process.php',
            type: 'POST',
            data: $(this).serialize(), //serielize form data
            dataType: 'html'
        })
        .done(function(data){
            $('#test').fadeOut('slow',function(){
                $('#test').fadeIn('slow').html(data);
            });
        })
        .fail(function(){
            alert(':(');
        });


    });

这里是php部分

<?php

    include 'connection.php';

    if( $_POST ){
        $mob_id_name = $_POST['mob_id_name'];
    }

    $sql = "select  restartmap.map.map_name, restartmap.map.map_id
            from    restartmap.map, restartmap.map_monster, restartmap.monster
            where   restartmap.map.map_id = restartmap.map_monster.map_monster_map_id and
                    restartmap.monster.monster_id = restartmap.map_monster.map_monster_monster_id and
                    (restartmap.monster.monster_id = '$mob_id_name' 
                    or restartmap.monster.monster_name like '$mob_id_name')";
    $result = $conn->query($sql);

    $conn->close();
?>


<div id="result-container">
    <?php
        if($result->num_rows > 0 ){
            while($row = $result->fetch_assoc()){
                print "map: " . $row["map_name"] . " map_id: " .$row["map_id"] . "<br>";
            }
        }else{
            print "<p> nothing :( </p>";
        }


    ?>
</div>

基本上我所做的是通过 AJAX 从 index.php 将信息发送到 process.php，然后在 index.php 中打印整个 $result var，但我真正想要做的是用相同的方式突出显示 div id 为 map_id。

Answer 1

您可以更改您的 jQuery 代码以接受 json 作为 dataType，就像这样，而不是在 PHP 中使用 parse_str 将发布的序列化数据解析为您可以使用的数组，而不仅仅是构建将返回给.done jquery ajax 函数中的参数的数组。我在下面的 php 中使用$return，而不仅仅是json_encode 这个值，以便可以使用它。

类似下面的东西应该可以很好地工作。但是您没有在这些 div 中指定您想要的内容，所以我只是将Put something in here 文本替换为您需要的任何内容。

jQuery:

$('#ro-form').submit(function(e){
    e.preventDefault(); //Prevent default submission

    var $parentDiv = $('<div />').attr('id', 'result-container');

    $.ajax({
        url: 'files/php/process.php',
        type: 'POST',
        data: {
            formData: $(this).serialize()
        },
        dataType: 'json'
    })
    .done(function(data){

        if (data.hasOwnProperty('msgids'))
        {
            for(var x = 0, len = data['msgids'].length; x < len; x++)
            {
                var $div = $('<div />').attr('id', data['msgids'][x]).text('Put something in here');
                $div.appendTo($parentDiv);
            }
            $('body').append($parentDiv);
        }
    })
    .fail(function(){
        alert(':(');
    });


});

php:

<?php

    $return = array();

    include 'connection.php';

    if(!empty($_POST['formData']))
    {
        parse_str($_POST['formData'], $data);

        $mob_id_name = $data['mob_id_name'];

        $sql = "select  restartmap.map.map_name, restartmap.map.map_id
            from    restartmap.map, restartmap.map_monster, restartmap.monster
            where   restartmap.map.map_id = restartmap.map_monster.map_monster_map_id and
                    restartmap.monster.monster_id = restartmap.map_monster.map_monster_monster_id and
                    (restartmap.monster.monster_id = '$mob_id_name' 
                    or restartmap.monster.monster_name like '$mob_id_name')";
        $result = $conn->query($sql);

        $conn->close();

        if ($result->num_rows > 0)
        {
            while($row = $result->fetch_assoc()){
                $return['msgids'][] = $row['map_id'];
            }
        }

    }

    echo json_encode($return);
    die();

?>