在javascript中调用PHP变量

Calling PHP variable in javascript

本文关键字：PHP 变量 调用 javascript      更新时间：2023-09-26

我想在HTML/Javascript中从PHP调用一个变量（id），其中DB中的行的id将从锚点发送到另一个页面，这样就可以在表中查看行的详细信息。

var eventContent = $('<div class="event-info">' + '<h4 class="event-name">' + point.name + '</h4><hr>' +
        '<span><h5>Date: </h5>' +
        '<p class="event-date">' + point.edate + '</p></span>' +
        '<p class="event-description">'+ point.description +'</p>' + 
        '<input type="button" id="view-event"  class="btn btn-info btn-sm" onclick="showDetails();" value="View Event" />'+
        '<a href="details.php<?php echo $id; ?>" class="btn btn-danger btn-sm">Remove Event</a>' +
        '</div>');

例如，保存和显示了许多不同的事件，当单击VIEW按钮时，它会打开一个新页面，其中具有该ID的事件显示在表中。

更新：我还尝试过在PHP/HTML:中创建详细信息列表

$result = mysqli_query($con,"SELECT * FROM events");
                while($row = mysqli_fetch_array($result))
                {
                    echo "<div class='event-details' id='event-details' style='display: none'>";
                    echo "<h3>Event Details</h3>";
                    echo "<table class='table'>";
                    echo "<tr><th>Event Name: </th><td>" . $row['name'] . "</td></tr>";
                    echo "<tr><th>Event Date: </th><td>" . $row['edate'] . "</td></tr>";
                    echo "<tr><th>Event Type: </th><td>" . $row['category'] . "</td></tr>";
                    echo "<tr><th>Event Details: </th><td>" . $row['description'] . "</td></tr>";
                    echo"</table>";
                    echo "<td><a href='details.php?id=".$row['id']."' class='btn btn-warning btn-sm'>View</a></td></div>";
                }

然后使用clone（）以javascript显示：

var eventList = $("#event-details").clone().show();
google.maps.event.addListener(event_markers[i], "click", function () {
        infowindow.setContent(eventList[0]);
        infowindow.open(map, event_markers[i]);
        map.setCenter(marker.getPosition());
        map.setZoom(10);
    });

现在，这种方式将ID发送到输入，但它将相同的ID发送到每个项目-DB中目前有5行的ID从6到10，但当页面加载时，它将第一个ID（6）发送到所有事件，而不是从DB中为每个事件提供自己的唯一ID。

您的代码可能是这样的：

var id = <?php echo $id; ?>;
var eventContent = $('<div class="event-info">' + '<h4 class="event-name">' + point.name + '</h4><hr>' +
        '<span><h5>Date: </h5>' +
        '<p class="event-date">' + point.edate + '</p></span>' +
        '<p class="event-description">'+ point.description +'</p>' + 
        '<input type="button" id="view-event"  class="btn btn-info btn-sm" onclick="showDetails();" value="View Event" />'+
        '<a href="details.php?id=' + id + '" class="btn btn-danger btn-sm">Remove Event</a>' +
        '</div>');

然而，我发现这要干净得多：

<div class="event-info">
  <h4 class="event-name"></h4>
  <hr>
  <span>
    <h5>Date: </h5>
    <p class="event-date"></p>
  </span>
  <p class="event-description"></p>
  <input type="button" id="view-event" class="btn btn-info btn-sm"
    onclick="showDetails();" value="View Event" />
  <a class="btn btn-danger btn-sm">Remove Event</a>
</div>
// below is the javascript example for your manipulations
var id = <?php echo $id; ?>;
$('h4.event-name').html(point.name);
$('p.event-date').html(point.edate);
$('p.event-description').html(point.description);
$('p.event-description').html(point.description);
$('div.event-info a.btn').attr('href', 'details.php?id='+id);

使用后者，您可以为事件数据创建一个容器（例如，如果您必须在同一页面中显示更多事件数据），然后从数据库中生成一个id列表。步骤是：

  • 准备一个div（就像一个空模板）
  • 获取事件列表（作为数组，或者更好的JSON）
  • 将php到javascript的列表传递到JS变量中（或者可能执行AJAX调用）
  • 使用JS迭代数组
    • 对于每个容器，克隆容器并为其分配一个唯一的id
    • 对于每个容器，您都会有一个稍微修改过的JavaScript代码版本（见下文）

因此，您不必担心可读性或可重用性。

var id = point.id;
$('div#' + id + ' h4.event-name').html(point.name);
$('div#' + id + ' p.event-date').html(point.edate);
$('div#' + id + ' p.event-description').html(point.description);
$('div#' + id + ' p.event-description').html(point.description);
$('div#' + id + ' div.event-info a.btn').attr('href', 'details.php?id='+point.id);

一如既往，我们非常欢迎进一步的改进和建议。

看起来您的服务器正在返回一些事件数据。让它也返回事件ID。

例如，如果您的页面为各种事件返回JSON，请在JSON对象中包含ID。

相关文章：