访问其他文件 javascript 中的 PHP 会话值

Question

我正尝试在 PHP 文件上执行模态，我正在另一个 javascript 文件上从模态管理表单。

我的问题是：如何访问该 javascript 文件中的会话值。

这是我在 php 文件中的 HTML 代码：

<dialog class="modal" id="modal">
        <div class=modal-header>
            <h1>Insert a term</h1>
        </div>
        <form class="form" method="dialog">
            <label>Title</label>
            <input type="text" id="title">
            <label>Description</label>
            <input type="text" id="description" placeholder="(Max 140 characters)">
            <div class="btn2-group">
                <button class="button" id="submitForm" type="submit">submit form</button>
                <button class="close button"><b>Close</b></button>
            </div>
        </form>
    </dialog>

这是我的 modal.js :

const modal = document.querySelector("#modal");
const openModal = document.querySelector(".open-button");
const closeModal = document.querySelector(".close");
const submitForm = document.querySelector("#submitForm")

openModal.addEventListener("click", () => {
    modal.showModal();
});

closeModal.addEventListener("click", () => {
    modal.close();
});

submitForm.addEventListener("click", () => {
    var title = document.getElementById("title").value;
    var desc = document.getElementById("description").value;
    var x = "<?=$_SESSION['user_id']?>";
    if (title && desc) {
        alert(x);
    } else {
        print("Please fill everything up!");
    }
 })

Answer 1

从 PHP 生成 JS 文件，将其命名为 modal.js.php。

<?php
session_start();
header("Content-type: text/javascript");
?>
const modal = document.querySelector("#modal");
const openModal = document.querySelector(".open-button");
const closeModal = document.querySelector(".close");
const submitForm = document.querySelector("#submitForm")

openModal.addEventListener("click", () => {
    modal.showModal();
});

closeModal.addEventListener("click", () => {
    modal.close();
});

submitForm.addEventListener("click", () => {
    var title = document.getElementById("title").value;
    var desc = document.getElementById("description").value;
    var x = <?= json_encode($_SESSION['user_id']) ?>;
    if (title && desc) {
        alert(x);
    } else {
        print("Please fill everything up!");
    }
 })

Answer 2

正如我在评论中所建议的那样，我会尝试向 PHP HTML 代码中添加隐藏输入，如下所示：

<dialog class="modal" id="modal">
    <div class=modal-header>
        <h1>Insert a term</h1>
    </div>
    <form class="form" method="dialog">
        <label>Title</label>
        <input type="text" id="title">
        <label>Description</label>
        <input type="text" id="description" placeholder="(Max 140 characters)">
        <input type="hidden" id="user-id" name="userId" value="<?=$_SESSION['user_id']?>">
        <div class="btn2-group">
            <button class="button" id="submitForm" type="submit">submit form</button>
            <button class="close button"><b>Close</b></button>
        </div>
    </form>
</dialog>

然后像这样通过JS获取：

const modal = document.querySelector("#modal");
const openModal = document.querySelector(".open-button");
const closeModal = document.querySelector(".close");
const submitForm = document.querySelector("#submitForm");
const userID = document.getElementById("user-id").value;

openModal.addEventListener("click", () => {
    modal.showModal();
});

closeModal.addEventListener("click", () => {
    modal.close();
});

submitForm.addEventListener("click", () => {
    var title = document.getElementById("title").value;
    var desc = document.getElementById("description").value;
    if (title && desc) {
        alert(userID);
    } else {
        print("Please fill everything up!");
    }
})

当然你可以通过不同的方式获取隐藏的输入值，比如：

const userID = document.getElementsByName("userId")[0];

更新：

嗯，我同意评论中M. Eriksson 的论点。也许应该重新考虑这段代码背后的逻辑。

Answer 3

这是我的建议：

不要在JS中输出用户id，一并从表单中移除。

如果您知道它应该是当前用户，则改为从接收表单请求的页面上 PHP 中的会话中获取用户 ID。您无需将其发送给客户端即可在 PHP.

中取回

如果您确实从客户端发送它，您仍然需要 validate/verify ID，因为您永远不应该信任从客户端获得的信任数据。任何人都可以在 client/browser 中修改该 ID 并发送他们想要的任何内容。

访问其他文件 javascript 中的 PHP 会话值

access PHP session value in other file's javascript

javascript

php

modal-dialog