Javascript 在AJAX请求后刷新div

我有一个通知面板，当用户点击十字删除通知时，我只想让DIV刷新，这样它就可以扔掉旧的通知，并用当前的通知刷新。我现在看到的是，它会刷新，但所有数据都会消失，只显示框

屏幕截图

之前：

之后：

HTML

<div id="messageboxcon">
  @php
     $usersid2 = Auth::id();
     $usersalert2 = DB::table('notifications')->where('userid', $usersid2)->orderBy('created_at', 'desc')->get();
  @endphp

  <h3 style="color: gray; 
      font-weight: 100; 
      float: left; 
      margin-left: 15px; 
      margin-top -50px;">
      Notifications : {{count($usersalert2)}}
  </h3>
  <div class="notificationcontainer">
      @php
         $usersid = Auth::id();
         $usersalert = DB::table('notifications')->where('userid', $usersid)->orderBy('created_at', 'desc')->get();
      @endphp

      @if(count($usersalert) > 0)
        @foreach ($usersalert as $item)
          <div class="notification">
             <h2 class="notiftitle">{{$item->type}}</h2>
             <h3>{{$item->message}}</h3>
             <a class="removenotif" data-id="{{$item->id}}" data-token="{{ csrf_token() }}"><i  class="crossnotif fas fa-times fa-sm"></i></a>
          </div>
        @endforeach
      @endif
  </div>
</div>

---

在成功中，执行类似于

$（“#项-”+id）的操作
在成功中执行类似于
$（“#项-”+id）的操作
在成功回调中，我将使用jQuery
.parents（）
函数。

在click事件处理程序函数的上下文中，
$（this）
表示“关闭通知元素”。

您需要使用
通知类删除
。

所以我会做一些类似于
$（this）.parents（'.notification'）.remove（）

我不确定你想用这个实现什么：

$('#messageboxcon').load(document.URL +  ' #messageboxcon');

它将在messageboxcon
中加载整个网页，这不是您想要实现的

如果要刷新内容，请执行AJAX调用，只获取通知的HTML

只需在服务器端创建一个页面（notifications.php）即可完成最初的工作：

      @php
         $usersid = Auth::id();
         $usersalert = DB::table('notifications')->where('userid', $usersid)->orderBy('created_at', 'desc')->get();
      @endphp

      @if(count($usersalert) > 0)
        @foreach ($usersalert as $item)
          <div class="notification">
             <h2 class="notiftitle">{{$item->type}}</h2>
             <h3>{{$item->message}}</h3>
             <a class="removenotif" data-id="{{$item->id}}" data-token="{{ csrf_token() }}"><i  class="crossnotif fas fa-times fa-sm"></i></a>
          </div>
        @endforeach
      @endif

在成功回调中，我将使用jQuery
.parents（）
函数。

在click事件处理程序函数的上下文中，
$（this）
表示“关闭通知元素”。

您需要使用
通知类删除
。

所以我会做一些类似于
$（this）.parents（'.notification'）.remove（）

我不确定你想用这个实现什么：

$('#messageboxcon').load(document.URL +  ' #messageboxcon');

它将在messageboxcon
中加载整个网页，这不是您想要实现的

如果要刷新内容，请执行AJAX调用，只获取通知的HTML

只需在服务器端创建一个页面（notifications.php）即可完成最初的工作：

      @php
         $usersid = Auth::id();
         $usersalert = DB::table('notifications')->where('userid', $usersid)->orderBy('created_at', 'desc')->get();
      @endphp

      @if(count($usersalert) > 0)
        @foreach ($usersalert as $item)
          <div class="notification">
             <h2 class="notiftitle">{{$item->type}}</h2>
             <h3>{{$item->message}}</h3>
             <a class="removenotif" data-id="{{$item->id}}" data-token="{{ csrf_token() }}"><i  class="crossnotif fas fa-times fa-sm"></i></a>
          </div>
        @endforeach
      @endif

换行

$('#messageboxcon').load(document.URL +  ' #messageboxcon');

为此：

$('#messageboxcon').load(document.URL +  '#messageboxcon');

在您的成功代码中。您有一个额外的空间
更改此行

$('#messageboxcon').load(document.URL +  ' #messageboxcon');

为此：

$('#messageboxcon').load(document.URL +  '#messageboxcon');

在成功代码中，您有一个额外的空间
您需要创建一个新的javascript函数，在该函数中，您将从通知表中获取数据。函数应如下所示：

function updateContent(){
$.ajax({
    url: 'n.php',
    type: 'GET',
    success: function (data) {
        console.log("get recent data in HTML");
        $('.notificationcontainer').html(data);
    },
    error: function (data) {
        console.log(data);
    }
});   

}

以及n.php文件中的代码

@php
$usersid = Auth::id();
$usersalert = DB::table('notifications')->where('userid', $usersid)->orderBy('created_at', 'desc')->get();
@endphp

@if(count($usersalert) > 0)
@foreach ($usersalert as $item)
    <div class="notification">
        <h2 class="notiftitle">{{$item->type}}</h2>
        <h3>{{$item->message}}</h3>
        <a class="removenotif" data-id="{{$item->id}}" data-token="{{ csrf_token() }}"><i  class="crossnotif fas fa-times fa-sm"></i></a>
    </div>
@endforeach
@endif

您需要创建一个新的javascript函数，在该函数中，您将从通知表中获取数据。函数应如下所示：

function updateContent(){
$.ajax({
    url: 'n.php',
    type: 'GET',
    success: function (data) {
        console.log("get recent data in HTML");
        $('.notificationcontainer').html(data);
    },
    error: function (data) {
        console.log(data);
    }
});   

}

以及n.php文件中的代码

@php
$usersid = Auth::id();
$usersalert = DB::table('notifications')->where('userid', $usersid)->orderBy('created_at', 'desc')->get();
@endphp

@if(count($usersalert) > 0)
@foreach ($usersalert as $item)
    <div class="notification">
        <h2 class="notiftitle">{{$item->type}}</h2>
        <h3>{{$item->message}}</h3>
        <a class="removenotif" data-id="{{$item->id}}" data-token="{{ csrf_token() }}"><i  class="crossnotif fas fa-times fa-sm"></i></a>
    </div>
@endforeach
@endif

在不同的文件中创建通知容器的副本，比如说not.php
然后创建一个新的Ajax，URL为not.php
然后使用通知容器的id获取jquery的数据。所以这就像是一次刷新

然后创建一个按钮，该按钮将执行您在单击事件上创建的新jQuery

因此，您要做的是，在上一个jQuery删除了通知之后，您将使它甚至可以单击“刷新”按钮，这样您就不必手动单击它。
这将用新的通知容器替换旧的通知容器

记住链接jQuery文件add aslo可能希望将jQuery代码添加到新文件中，即not.php，否则它只能工作一次，因为如果不将它放在那里，它将无法使用任何ajax
在不同的文件中创建通知容器的副本，比如not.php
然后创建一个新的Ajax，URL为not.php
然后使用通知容器的id获取jquery的数据。所以这就像是一次刷新

然后创建一个按钮，该按钮将执行您在单击事件上创建的新jQuery

因此，您要做的是，在上一个jQuery删除了通知之后，您将使它甚至可以单击“刷新”按钮，这样您就不必手动单击它。
这将用新的通知容器替换旧的通知容器

请记住链接jQuery文件add aslo可能希望将jQuery代码添加到新文件，即not.php，否则它只能工作一次，因为如果您不将它放在那里，它将无法使用任何ajax
在
success
中重新加载新数据在
success
中重新加载新数据，没有具有此类ID的元素，因此在其当前形式下，这不会真正起作用。他可以轻松添加它。答案应包含具有适当描述的适当代码示例。仅仅发布一小段代码，如果没有额外的更改（甚至没有提到），它甚至无法工作，这不是一个合适的例子。请记住，我们不知道OP或未来访客的经验有多丰富。不要以为他们会理解还需要更改的内容。据我所知，没有具有此类ID的元素，因此在当前形式下这不会真正起作用。他可以轻松添加。答案应该包含正确的代码示例和正确的描述。仅仅发布一小段代码，如果没有额外的更改（甚至没有提到），它甚至无法工作，这不是一个合适的例子。请记住，我们不知道OP或未来访客的经验有多丰富。不要以为他们会明白还需要更改什么。嗨，我在layouts文件夹中创建了notifications.blade.php。我包含了它，但在执行时，$（'notificationcontainer'）.load（'notifications.php'）如何定位它？对Javascript不是很有经验？所以，任何事情都是很大的帮助！：）php只是一个例子。我不知道您使用的是哪种PHP框架，但这并不重要。而且您不需要有Javascript方面的经验。您使用的是模板系统（刀片），但您需要了解如何