使用模式对话框的 jquery 和 php 更新

Question

我正在尝试使用模式窗口根据文章 id 显示带有特定信息的 html 表单，但我正在努力将值/id 传递给我的自定义 php 函数。 所以，这里是 html/php 部分

    while(...) :
       <a href="#" id="$row['id']" class="button">Edit</a>
    endwhile; 

现在是js，

    $("a.button").on("click", function() {
        $("#modal").reveal();
        return false;
    });

html和php函数

    <div id="modal">
        <?php echo showForm($needThisIDbasedOnClick); ?>
    </div>

希望这一切对你有意义，我正在努力获取某个 id 并传递给 php 函数

我尝试删除 return false; 并遵循 href 属性 <a href="?id=17"> ... 而不是使用 $_GET['id'] showForm($_GET['id']) 获取值，但这个解决方案无法按我想要的方式工作，它会重新加载页面...

Answer 1

包含 PHP 代码的页面在服务器端执行。 PHP 被解释，然后内容被发送到您的浏览器。收到数据后，你的JS代码在客户端执行（感谢你浏览器的JS机器）。

如果您想在不重新加载任何内容的情况下显示信息，您有两种解决方案：

• 在PHP处理过程中嵌入页面中的所有信息并保持隐藏，显示好的JS代码取决于点击的链接。 （错误的解决方案）

• 使用带有参数 ID 的 AJAX 请求，该请求将调用一个新的 PHP 短脚本，返回指定行的信息。

如果我恢复该过程可能是：

1) 第一个请求在您的主脚本 ma​​in.php

上

2)该页面显示您的所有项目（仅嵌入ID）并包含信息容器（隐藏且为空）

例子

<!-- Your list of link with article ID -->
<div>
    <a class="articleLink" id="123" href="#">View</a>
    <a class="articleLink" id="124" href="#">View</a>
    <a class="articleLink" id="125" href="#">View</a>
</div>

<!-- The bloc that will contain info and will be shown in a popup later (hidden) -->
<div id="divInfo">
    <input type="text" name="name" value=""/>
    <input type="text" name="description" value=""/>
</div>

<script>

    $(document).ready(function() {

        // add listener to all link
        $(".articleLink").click(function(mouseEvent) {

            // Retrieve the article ID                
            var myId = $(this).attr('id');

            // Ajax call with the id of the link
            // onSuccess, fill the divInfo and show it
            $.ajax('getInfo.php', {
                dataType: 'json',
                type: 'POST',
                data: {
                    articleId: myId
                },
                success: function(data, status, xhrObj) {

                    // The data is received, update the info container
                    $("#divInfo input[name=name]").val(data.name);
                    $("#divInfo input[name=description]").val(data.desc);

                    // Show the div in a popup
                    //...
                }
            });

            return false;
        });
    });

</script>

3) 您正在点击一个链接，它将运行对第二个 PHP 脚本的 ajax 调用：getInfo.php，给出指定的 ID

4) 脚本检索数据库中的数据并最终返回信息（例如 JSON 格式）

假设您的 PHP getInfo.php 将返回 JSON 之类的

{"name":"an article name","description":"the article description"}

注意：您可以使用函数在 PHP 中轻松地从数组中生成 JSON

json_encode()

5) 收到数据时调用 Ajax 调用的 onSuccess 方法，您可以使用数据填写表单（这是唯一的并且已经存在于页面中 - 并且是隐藏）。

祝你好运