javascript - 将 PHP 类对象传递给 Javascript 并在 Javascript 函数中访问其属性

Question

我无法访问 object 的属性在我创建的 Javascript 函数中。该对象最初是一个 PHP object我编码为 JSON使用 json_encode()

我有 1 个 PHP 文件和 1 个外部 JS 文件。

在我的 PHP 文件中，我有 ff:

<?php
    $announcementDaoImpl = new AnnouncementDaoImpl($pdo);
    $announcementList = $announcementDaoImpl->getAllAnnouncementByMostRecent();
    foreach($announcementList as $key => $value): ?>
        <tr>
        <td><?php echo $value->getId(); ?></td>
        <td><?php echo $value->getTitle(); ?></td>
        <td><?php echo $value->getDateAdded(); ?></td>
        <?php echo json_encode($value); ?> 
        <td>
        <a href="#" onclick="showEditModal('modalBox',<?php echo json_encode($value); ?>)">Edit</a>
        </td>
        </tr>
    <?php endforeach; ?>

我可以使用 get() 获取并显示这些值<td> 上的方法的。但是，当我将其编码为 JSON 时通过json_encode($value) , 我一无所获。

线

<?php echo json_encode($value); ?> 

echoe s {} {} {} {} {} {} {} {} {} {} {} {} {}这似乎是空对象。

我的目标是能够通过 $value php javascript 方法的对象 showEditModal()然后在方法 block 中访问对象的属性。像，object.propertyname

下面是javascript方法showEditModal()实现。

function showEditModal(modalDivId,object){
    alert(object.title); //returns undefined

    var modalBox = document.getElementById(modalDivId);
    var modalContentValues = document.getElementById("modalContentValues");
    modalBox.style.display = "block";
    var node = document.createElement("p");
    var text = document.createTextNode(object); //shows [object Object]
    node.style.display = "inline";
    node.appendChild(text);
    modalContentValues.appendChild(node);
}

--- 编辑 ---

这是类定义。

class Announcement {
    private $id;
    private $title;
    private $content;
    private $dateAdded;


    public function getContent()
    {
        return $this->content;
    }

    public function setContent($content)
    {
        $this->content = $content;
    }

    public function getDateAdded()
    {
        return $this->dateAdded;
    }

    public function setDateAdded($dateAdded)
    {
        $this->dateAdded = $dateAdded;
    }

    public function getId()
    {
        return $this->id;
    }

    public function setId($id)
    {
        $this->id = $id;
    }

    public function getTitle()
    {
        return $this->title;
    }

    public function setTitle($title)
    {
        $this->title = $title;
    }
} 

-- 编辑结束--

这是我浏览器上显示的内容。

我已经为 javascript 方法添加了一些注释以获取更多详细信息。

如果有任何帮助，我将不胜感激。

谢谢。

Answer 1

您可以实现 JsonSerializable定义序列化对象时要显示的属性的接口(interface)；例如:

<?php 

class User implements \JsonSerializable
{
    private $name;

    public function __construct(string $name)
    {
        $this->name = $name;
    }

    public function jsonSerialize()
    {
        return [
            'name' => $this->name,
        ];
    }
}

echo json_encode(new User('Bob')); // {"name":"Bob"} 

这是一种在 PHP 中以透明和隐式方式处理对象序列化的惯用方法，它允许您为对象的 json 表示定义首选形状/格式，并将其封装在类定义中。

序列化嵌套对象结构时非常方便，例如，当您使用值对象时 - 这是一个(人为的)示例:

class Latitude implements \JsonSerializable
{
    private $degree;

    public function __construct(float $degree)
    {
        // validation etc.
        $this->degree = $degree;
    }

    public function jsonSerialize(): float
    {
        return $this->degree;
    }
}

class Longitude implements \JsonSerializable
{
    private $degree;

    public function __construct(float $degree)
    {
        // validation etc.
        $this->degree = $degree;
    }

    public function jsonSerialize(): float
    {
        return $this->degree;
    }
}

class Coordinate implements \JsonSerializable
{
    public function __construct(Latitude $latitude, Longitude $longitude)
    {
        $this->latitude = $latitude;
        $this->longitude = $longitude;
    }

    public function jsonSerialize(): array
    {
        return [
          'latlng' => [$this->latitude, $this->longitude],
        ];
    }
}

$coordinate = new Coordinate(new Latitude(0), new Longitude(0));

echo json_encode($coordinate); // {"latlng":[0,0]} 

示例:https://repl.it/repls/RelievedLightcyanFolders