0

在我正在处理的网站上，我有一个管理员面板，允许管理员将列表项添加到现有的无序列表中。这是使用带有 jQ​​uery 的 AJAX 表单完成的.append()。列表项是 URL，并使用 PHP 插入到数据库中。这部分有效。

无论管理员是否登录，我都需要能够使用新列表项重新加载页面（例如，我希望所有用户都可以使用更新的列表）。我知道我不能这样做，除非我使用会话、cookie 或某种本地存储/持久存储实用程序。

如果我决定使用像 persistJS 这样的东西，我需要保存什么以便以后重新加载？整个<ul>? 整个文件？

如果我使用 PHP 会话，我会怎么做？

以下是一些示例列表和表格

<h3 class="category">
    List 1
</h3>
<ul id="1">
    <li>List item 1</li>
    <li>List item 2</li>
</ul>
<br />
<h3 class="category">
    List 2
</h3>
<ul id="2">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
</ul>

<form id="addRec_form" action="classes/resources/addResource.php" method="post">
    <p><select name="categoryList" id="categoryList">
        <option value="0">Select a list to add to</option>
        <option value="1">List 1</option>
        <option value="2">List 2</option>
    </select></p>
    <p>Resource name: <input type="text" name="recName" id="recName" /></p>
    <p>Resource URL: <input type="text" name="recURL" id="recURL" /></p>
    <p><input type="submit" name="submitAddRec" value="Add resource" id="submitAddRec" /></p>
</form>

和 AJAX：

$.ajax ({
    type: 'post',
    url: '/classes/resources/addResource.php',
    data: {
        recName: $('#recName').val(),
        recURL: $('#recURL').val()
    },
    success: function(data) {
        if (data === 'added') {
            function updateLists() {
                var h3ID = $('#categoryList option:selected').val();
                var title = $('#recName').val();
                var url = $('#recURL').val();
                var newListItem = '<li><a href=\"' + url + '\">' + title + '</a></li>';
                $('ul#' + h3ID).append(newListItem);
            }
        }
        else
            $('span#resError').fadeIn(400).text('There was an error adding this resource');
    }
});

再次，PHP 工作。AJAX 甚至可以工作，因为我可以看到新列表项被添加到适当的列表中。当我刷新页面时，新列表项显然不存在。

有意义的是，无论我需要做什么来保存新的 DOM 状态，都需要在 AJAX 成功部分中完成。

我只是不知道如何开始。有人可以为我提供一些我想要完成的示例代码吗？不管是服务器端还是客户端。

谢谢！

编辑：是否可以在第一次成功后进行额外的 AJAX 调用？例如，在第一个 AJAX 请求成功后，将进行一个新的 AJAX 调用，该调用将使用 PHP 添加新的列表项，以便它在页面重新加载时出现？

4

0 回答 0