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

更新：

好的，感谢瑞安，我能够解决这个问题。这是解决方案：

//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 在这方面的帮助。