javascript - 是否可以提供我的 "ajax-divs"URL 参数？

Question

我的应用正在从数据库读取信息并使用 jQuery 向用户显示信息。如果用户单击条目，div 将弹出并显示更多信息。

我想用一个 URL 打开这些 div。是否可以？我在考虑使用条目 ID 作为参数吗？

像这样:带有条目 id = 123 的 div 将打开这样的链接

https://url.de/index.php?param=123

// *** Funktion für Details-Overlay ***
function on(id) {
  $.ajax({
    url: "AJAX.php",
    data: 'id=' + id + '&switch_content=details',
    success: function(result) {
      $("#data-table").html(result);
    }
  });
  document.getElementById("overlay").style.display = "block";
}

function off() {
  document.getElementById("overlay").style.display = "none";
}

#overlay {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id=12>Click on me</div>

<!-- OVERLAY -->
<div id="overlay">
  <div id="ContainerBox" align="center">
    <img onclick="off()" id="imgclose" src="images/auswertung-close.png">
    <div id="headerSticky"></div>
    <h2>Gesamte Übersicht</h2>
    <hr>

    <!--  Tabelle für Detailseite  -->
    <table data-role="table" id="data-table" data-filter="true" data-input="#filterTable-input" class="ui-responsive" border="1" style="overflow-x: auto;">
      <!-- AJAX/Informations -->
    </table>
  </div>
</div>

PHP/AJAX:

<?php 
// Verbindung zur Datenbank
$pdo = new PDO('mysql:host=***;dbname=***', '***', '***');

$pdo ->exec("set names utf8");

if ($_GET ['switch_content']=='details'){

    // SQL Befehl + ID rausnehmen
    $sql_befehlDetail = "SELECT * FROM fair_contact_form WHERE  id= :id";

    // Ergebnisse aus dem SQL Befehl in $ergebnis ziehen
    $ergebnisDetail = $pdo->prepare ($sql_befehlDetail);
    $ergebnisDetail->execute(array('id'=>$_GET['id']));

    $datenDetail = $ergebnisDetail->fetch();
    $search = '/../../../../htdocs/..;
    $replace = 'https://url.de';
    $karte = str_replace($search, $replace, $datenDetail['businessCard']);
    echo '<thead>
            <tr>
                <td class="" colspan="2"></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-priority="2"> ID </td>
                <td> '. $datenDetail['id'] .' </td>
            </tr>
            <tr>
                <td data-priority="2"> Handelsmesse </td>
                <td> '. $datenDetail['fair'] .' </td>
            </tr>
            <tr>
                 <td data-priority="3"> Datum </td>
                    <td> '. $datenDetail['timestamp'] .' </td>
             </tr>
             <tr>
                 <td data-priority="4"> dateTimeOfContact: </td>
                 <td> '. $datenDetail['dateTimeOfContact'] .' </td>
             </tr>
             <tr>
                 <td data-priority="5"> Gesprächsdauer </td>
                     <td> '. $datenDetail['durationOfContact'] .' </td>
             </tr>
        </tbody>';
} 
else if($_GET['switch_content']=='startseite') {

    $sql_befehlGesamt = "SELECT * FROM fair_contact_form ORDER BY id DESC";
    $ergebnisGesamt = $pdo->query($sql_befehlGesamt);

    ?><div data-role="header"></div>
    <div role="main" class="ui-content">    
        <table id="table" border="1" data-filter="true" data-input="#filterTable-input" class="ui-responsive" data-role="table" 
                id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
            <thead>
                <tr>
                    <th data-priority="1" id="sortieren_id">ID</th>
                    <th data-priority="4" id="sortieren_email" class="ui-table-cell-hidden">E-Mail</th>
                    <th data-priority="4" id="sortieren_gespraechsinhalt" class="ui-table-cell-hidden">Gesprächsinhalt</th> <!-- classe dient dazu, checkbox auf unchecked zu stellen  -->
                </tr>
            </thead>
            <tbody><?php 
            while ($datenGesamt = $ergebnisGesamt->fetchObject()) {
                $dateTimeOfContact = new DateTime($datenGesamt->dateTimeOfContact);
                ?><tr onclick="on(<?=$datenGesamt->id?>)" style="cursor:pointer">
                    <td onclick="on(<?=$datenGesamt->id ?>)"><p style="color:#E3000F;"><b><?=$datenGesamt->id ?></b></p></td>
                    <td><?=$datenGesamt->fair ?></td>
                    <td><?=$dateTimeOfContact->format('d.m.Y') ?></td>
                    <td><?=$datenGesamt->author ?></td>
                    <td><?=$datenGesamt->genderOfContact ?></td>
                    <td><?=$datenGesamt->nameOfContact ?></td>
                    <td><?=$datenGesamt->surnameOfContact ?></td>
                    <td class="ui-table-cell-hidden"><?=$datenGesamt->companyName ?></td>
                </tr><?php 
            } ?>
        </tbody>
    </table>
</div>

Ajax div 中的信息应该可以通过 URL+参数访问。

Answer 1

是的，您可以在开始时触发所需的 ID 详细信息。

只需将下一个代码添加到您的 js 文件中:

// Shorthand for $( document ).ready()
$(function() {
    // This code will be run when document will be loaded
    var args = window.location.search.substring(1); // Get all URL arg
    args = args.split('&').map(arg => arg.split('=')); // convert to array with key, value

    args.forEach(function(arg) {
        var key = arg[0];
        var val = arg[1];

        if (key === 'param') { // Check if the URL param is our param, and if yes - open popup
            on(val);
        }
    });
});