AJAX

2016-04-04 17 views
0

kullanarak görüntü eşlemi tıklatılmış alana bağlı olarak PHP sorgu kodunu düzenleyin Bu yüzden web sitemde (harita ve bölgelerle) bir resim haritası var ve belirli bir alana tıkladığımda belirli bir MySQL sorgusunun yürütülmesini istiyorum. Temel olarak, resim haritasının belirli bir alanına tıklandığında aynı sayfada farklı veriler göstermesi gereken bir tablodur. JQuery veya AJAX kullanmam gerektiðini düþünmþtüm (bu iþlerle baþlayan ben oluyorum).AJAX

İşte resim haritası bulunuyor:

<img id="harta" src="img/hartap.png" alt="testmap" usemap="#Map" /> 
<map name="Map" id="Map"> 
    <area class="area1" alt="area1" title="area1" href="#table" shape="poly" coords="898,3071,902,3553,1108,3561,1129,3419,1254,3419,1278,3273,1472,3261,1476,3100" /> 
    <area class="area2" alt="area2" title="area2" href="#table" shape="poly" coords="842,2759,846,3035,1896,3076,1917,2816,1345,2774" /> 
    <area class="area3" alt="area3" title="area3" href="#table" shape="poly" coords="942,2327,934,2752,1342,2764,1380,2333" /> 
</map> 

Ve burada PHP kodu ile bölüm var: Bunu yapmak için jQuery kullanmalısınız

<section id="table" class="row"> 
<?php 

    require_once('config.php'); 

     $reg = "theclickedarea"; // THIS VARIABLE HAS TO BE MODIFIED DEPENDING ON THE CLICKED AREA 

     $con = mysql_connect("$host", "$username", "$password") or die(mysql_error()); 
     $db = mysql_select_db("$db_name") or die(mysql_error()); 
     $sql=mysql_query("SELECT name, score FROM table WHERE game='".$reg."'") or die(mysql_error()); 
     $count=0; 

    echo '<table> 
       <thead> 
        <tr> 
        <th>name</th> 
        <th>score</th> 
        </tr> 
       </thead> 
       <tbody>'; 
    while($row = mysql_fetch_array($sql)) 
    { 
     $name=$row['name']; 
     $score=$row['score']; 

     echo 
      '<tr> 
       <td>'.$name.'</td> 
       <td>'.$score.'</td> 
      </tr>'; 

     $count++; 
    } 
    echo ' </tbody> </table> '; 

?> 
</section> 

cevap

2

. Öncelikle alan elemanına tıklamak için bir olay dinleyicisine bağlanmalısınız. Daha sonra değerini alın ve alan adını, AJAX kullanarak PHP betiğine bir parametre olarak bir GET isteği yapın. PHP betiği veritabanını sorgular ve daha sonra sayfaya yönlendireceğiniz bir yanıt oluşturur.

Aşağıda jQuery olay dinleyicisi ekleyip alan değerini alır ve PHP betiğini çağırır.

<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.area').bind("click", function() { 
       var area = $(this).attr('title'); 
       var response = getTable(area); 

       $('#table-holder').html(response); 

      }); 

       function getTable(area) { 
       if (window.XMLHttpRequest) { 
        xhttp = new XMLHttpRequest(); 
       } else { 
        xhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
       } 
       var httpURL = "the_php_page.php?area=" + area; 
       xhttp.open("GET", httpURL, false); 
       xhttp.send(); 
       return xhttp.responseText; 
      } 
     }); 
    </script> 

html sayfası aşağıda gibi bir şey olur. Alan sınıflarının sınıfını aynı sınıfa değiştirdiğimi unutmayın çünkü jQuery'de sınıflara alıyorum.

<img id="harta" src="img/No_Image_Available.png" alt="testmap" usemap="#Map" /> 
<map name="Map" id="Map"> 
     <area class="area" alt="area1" title="area1" href="#table" shape="poly" coords="898,3071,902,3553,1108,3561,1129,3419,1254,3419,1278,3273,1472,3261,1476,3100" /> 
     <area class="area" alt="area2" title="area2" href="#table" shape="poly" coords="842,2759,846,3035,1896,3076,1917,2816,1345,2774" /> 
     <area class="area" alt="area3" title="area3" href="#table" shape="poly" coords="942,2327,934,2752,1342,2764,1380,2333" /> 
</map> 

<div id="table-holder"></div> 

Son olarak, ayrı bir dosyadır PHP gibi bir şey olur:

<?php 
require_once('config.php'); 

$reg = $_GET['area']; // THIS VARIABLE HAS TO BE MODIFIED DEPENDING ON THE CLICKED AREA 

$con = mysql_connect("$host", "$username", "$password") or die(mysql_error()); 
$db = mysql_select_db("$db_name") or die(mysql_error()); 
$sql = mysql_query("SELECT name, score FROM table WHERE game='" . $reg . "'") or die(mysql_error()); 
$count = 0; 

$response = '<table> 
       <thead> 
        <tr> 
        <th>name</th> 
        <th>score</th> 
        </tr> 
       </thead> 
       <tbody>'; 
while ($row = mysql_fetch_array($sql)) { 
    $name = $row['name']; 
    $score = $row['score']; 

    $response .= '<tr> 
         <td>' . $name . '</td> 
         <td>' . $score . '</td> 
        </tr>'; 

    $count++; 
} 
$response .= ' </tbody> </table> '; 
header('Content-type: text/plain'); 
exit($response); 
?> 

Üstelik kullanımdan kaldırıldı mysql olarak benim mysqsli SQL için bağlantı kullanmayı düşünün. http://php.net/manual/en/book.mysqli.php

Bu yardımcı olur umarım.

+0

Teşekkürler dostum! Biraz kontrol edeceğim ve olabildiğince hızlı bir şekilde size döneceğim. –

+0

Çalışıyor. Asla düşünmezdim. Size en iyi dileklerimle dostum! –

+1

Yardım etmekten memnun oldum. :) – Ivan