时间戳

首页 > 解决方案 > 刷新页面后动态div消失

php - 刷新页面后动态div消失

问题描述

所以我写了这段代码来动态地将用户内容上传到主页，但是每当我刷新页面时，div 就会消失。

$.ajax({
    url: "post_blog.php",
    method: "POST",
    data: {
      username: username,
      title: title,
      idea: idea
    },
    success: function(info) {
        $('#posthandler').prepend("<div class=\"col-md-10 col-lg-8 mx-auto\" style=\"border: 1px solid #0f799e; border-radius: 5px;\"><h4><label>" + username + "</label></h4> <h4><label>" + title + "</label></h4><div>" + idea + "</div> </div> <br>");
        $("#username").val("");
        $("#idea").val("");
        $("#title").val("");
    }
  });

标签： phpjqueryhtmlcss

解决方案

您的客户端（浏览器）需要某种方式从服务器检索数据以显示以获取新上传的内容。

你打电话时：

$('posthandler').prepend(....);

您只在本地显示，当您刷新页面时，它会消失。为了拥有持久数据，您需要将其存储在您的服务器上。如果您使用 PHP 模板语言，则需要了解如何设置 HTML 页面以在提供页面时检索值。

一个示例是，您需要通过在服务器上创建一个端点来向用户（浏览器）返回博客文章数据，从而在页面加载时发出一个帖子请求以获取上传的博客文章：

$( document ).ready(
  $.ajax({
      url: "get_post_blog.php",
      method: "POST",
      success: function(info) {
          $('#posthandler').prepend("<div class=\"col-md-10 col-lg-8 mx-auto\" style=\"border: 1px solid #0f799e; border-radius: 5px;\"><h4><label>" + username + "</label></h4> <h4><label>" + title + "</label></h4><div>" + idea + "</div> </div> <br>");
          $("#username").val("");
          $("#idea").val("");
          $("#title").val("");
      }
    });

)

推荐阅读