Question

我使用jQuery的.append()在AJAX调用中向li上的ul添加新的success元素。问题是，每当我刷新页面时，新附加的列表项就会消失。

我读过这与刷新原始页面有关，而且有些选项是使用cookie（PHP或jQuery）。我也看到了关于localStorage的一些信息。如果重要的话，我不会使用HTML5。

最好的方法是什么？如果我使用PHP，我可以在jQuery中嵌入脚本吗？是否有更优雅的方式来解决这个问题？

由于

编辑：包含代码

AJAX

$.ajax ({
type: 'post',
url: '/classes/resources/addResource.php',
data: {
    recName: $('#recName').val(),
    recURL: $('#recURL').val()
},
success: function(data) {
    if (data === 'added') {
        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);
        $('span#resError').fadeIn(400).text('Resource added successfully. Add another?');
   }
   else
       $('span#resError').fadeIn(400).text('There was an error adding this resource');
   }
});

HTML

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

当我添加列表项目5等时，我希望在刷新页面时保留这些新列表项。

Answer 1

如果使用ajax / javascript动态构建页面，则需要存储当前状态，以便在重新加载页面时以完全相同的方式构建它。

如果构建页面所需的信息存储在客户端，有几种方法可以实现会话（服务器端）或cookie / localStorage。

如果您没有使用html5但是您使用ajax来构建页面，那么使用会话并执行服务器端的所有操作可能是最简单的选择。只需在每次发出ajax请求时存储页面的当前/更新状态。

另一个考虑因素是信息必须持续多长时间。如果您使用标准的php会话机制，您的会话/状态将会非常快地丢失（大约一个小时没有重新加载/刷新我认为使用默认设置）。

重新加载页面后，新添加的元素消失（jQuery）

1 个答案: