從JavaScript到PHP的彈出窗口內容

Question

我有一張上面有很多標記的地圖。

我需要幫助將Javascript與PHP文件連接在一起，以便可以從數據庫中提取相關內容並將其放在彈出窗口的div中。 地圖和彈出窗口可以很好地工作，它們可以打開，但是我只是不知道如何將數據庫中的內容插入div #popupcontent中。

這是JavaScript的一部分：

        function showPopup(id, leftbul, topbul){
            map.find(settings.popupSelector).fadeOut(); 
            var boxid = '#' + id + '-box';

            $(boxid).fadeIn();      
            $(settings.popupCloseSelector).click(function(){
            $(this).parent().fadeOut()              
            });
        }

JavaScript / Ajax引用一個單獨的HTML文件，其中記錄了彈出標記。 每個標記/彈出窗口都有以下HTML，在同一文件中一個接一個。 在這種情況下，ID引用標識為97的地塊。

<a href="javascript:void(0)" id="97" class="bullet" style="color: rgb(0,0,0);font-size: 13px;" rel="222-156">97</a> 
<div class="popup" id="97-box" style="top:158px;left:220px;"> 
    <h3>97</h3> 
    <div class="popupcontent"> 
        <p>Insert my database content here </p> 
    </div>
    <a class="close" href="javascript:void(0)">Close</a> 
</div> 

我相信我需要在JavaScript中插入類似的內容，但是我沒有使其正常工作。 您認為可以在這里幫助我嗎？

$.get("popup.php", (id),
function( data ) {
var content = $( data ).find( '#content' );
$( "#popupcontent" ).empty().append( content );
}

這是服務器端的PHP文件：

<?php 
$id=$_GET["id"];
// Connects to your Database 
mysql_connect("mysql.url.com", "username", "password") or die(mysql_error()); 
mysql_select_db("database_name") or die(mysql_error()); 
$data = mysql_query("SELECT * FROM inventory WHERE lot_number = '".$id."'";) 
or die(mysql_error()); 
Print "<table border cellpadding=3 font-size:8px width:200px>"; 
while($info = mysql_fetch_array( $data )) 
{ 
Print "<tr>"; 
Print "<th>Lot number:</th> <td>".$info['lot_number'] . "</td></tr> "; 
Print "<th>Sales Status:</th> <td>".$info['lot_status'] . "</td> "; 
Print "<th>Model Built:</th> <td>".$info['model'] . "</td></tr> "; 
Print "<th>Lot Size:</th> <td>".$info['lot_size'] . " </td></tr>"; 
Print "<th>Frontage:</th> <td>".$info['lot_frontage'] . " </td></tr>";
Print "<th>Depth:</th> <td>".$info['lot_depth'] . " </td></tr>";
Print "<th>Premium:</th> <td>".$info['lot_premium'] . " </td></tr>";
Print "<th>Features:</th> <td>".$info['lot_features'] . " </td></tr>";
Print "<th>Restrictions:</th> <td>".$info['lot_restrictions'] . " </td></tr>";
Print "<th>Move-in Date:</th> <td>".$info['lot_move_date'] . " </td></tr>";
} 
Print "</table>"; 
?> 

Answer 1

最簡單的解決方案是使用jQuery的.load方法。

您將需要指定例如將返回html的php文件。 將$.get代碼替換為以下內容：

    $('.popupcontent').load('popup.php', {id: <your_id_here});

這里要注意的一件事：由於您實際上是在此處添加一個參數對象作為.load的第二個參數，因此jQuery將使用POST方法。 因此，在您的php文件中，您需要從$_GET更改為$_POST 。

如果要繼續使用GET方法，則將上面的代碼更改為以下代碼：

    $('.popupcontent').load('popup.php?id=id1');

在這種情況下，我建議給彈出內容div一個id，而不是class。 您正在處理一個獨特的物品。 我指的是您當前的HTML，您應該將其更改為以下內容：

    <div class="popup" id="97-box" style="top:158px;left:220px;"> 
        <h3>97</h3> 
        <div id="popupcontent"> 
            <!-- RETURNED TABLE FROM PHP FILE WILL GO HERE --> 
        </div>
        <a class="close" href="javascript:void(0)">Close</a> 
    </div>

如果您打算讓許多彈出窗口共享此行為，那么您可以執行以下操作：

    <-- HTML FILE -->
    <div class="popup" id="97-box" style="top:158px;left:220px;"> 
        <h3>97</h3> 
        <div class="popupcontent"> 
            <!-- RETURNED TABLE FROM PHP FILE WILL GO HERE --> 
        </div>
        <a class="close" href="javascript:void(0)">Close</a> 
    </div>

    // javascript file
    $('#97-box .popupcontent').load('popup.php', {id: <your_id_here>});

上面的模式使您可以將popupcontent設為可以由其他彈出窗口使用的通用類。 注意事項是在jQuery選擇器中添加其他選擇器。 在這種情況下，我建議$('#97-box .popupcontent')僅在id為97-box的html元素下選擇popupcontent div。 在這種情況下，這就是您的彈出窗口。

Answer 2

更新：

好的，謝謝Ryan，我能夠解決這個問題。 解決方法如下：

//find
        function showPopup(id, leftbul, topbul){
            map.find(settings.popupSelector).fadeOut(); 
            var boxid = '#' + id + '-box';

//open

            $(boxid).fadeIn();
//added this 
            $('.popupcontent').load('popup.php?boxid=' + id);

//close
            $(settings.popupCloseSelector).click(function(){
            $(this).parent().fadeOut()              
            });
        }

這捕獲了HTML中的ID。

PHP變量為：

$var = $_GET['boxid'];

我希望這可以幫助其他人。 謝謝Ryan在此方面的幫助。