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

时间:2017-07-25 23:45:30

标签: javascript php jquery css ajax

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

现在应用程序几乎正常工作,例如,如果用户编写“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。

1 个答案:

答案 0 :(得分: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();

?>