如何根據查詢結果「突出顯示」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），以的div id爲」 prt_fild07「和id =」prt_fild08「。

我知道我需要使用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> 

基本上我做的是從index.php中的信息發送通過AJAX來process.php和然後在index.php中打印整個$ result var，但我真正想做的是突出顯示與map_id具有相同id的div。

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(); 

?>