在 url 中传递参数时如何使用 AJAX 停止页面刷新

Question

潜伏已久

免责声明：

首先，对于在本论坛中提出的问题可能是重复的问题，提前致歉。由于我没有使用 ajax 的经验，因此我需要具体说明我要实现的目标。

上下文：

我正在开发一个供我和我的朋友使用的社交网站，并且我正在制作一个简单的个人消息系统。因此，我通过单击锚点在 url 中传递参数，以便整理出向用户显示的消息等。

该页面本身称为 messages.php，它看起来像这样： [messages.php][1]

如您在上图中所见，我在消息列表底部有一个名为“9 meldinger til”（翻译为“9 more messages”）的块 link。该按钮统计每个用户的剩余 PM，并在单击时向 url 添加两个参数：?view=inbox&show_all.

<a href='?view=inbox&show_all' class='small'>" . $remaining . "</a>

这些参数是在php:

中使用$_GET获取的

$view = $_GET['view'];
$show_all = $_GET['show_all'];

当我向下滚动 messages.php 并单击“9 meldinger til”时，页面（显然）刷新并跳回顶部，现在添加了url.

的参数

我需要什么帮助：

如何使用 ajax 阻止页面在单击锚点后刷新？（这样页面在导航消息时不会跳来跳去）

而且，如何在我的页面上实现它？示例代码是什么样的？

Answer 1

为此，您需要使用 AJAX。

$('.small').on('click', function(event){
   event.preventDefault();       
   var href = $(this).attr('href');
   var hrefSplit = href.split('?view=');
   var viewSplit = hrefSplit[0].split('&');
   var view = viewSplit[0]
   $.ajax({
    url: '/messages.php?view=' + view + '&show_all',
    success: function(result) {
        result = $(result).find('#messageList');
        $('#messageList').html(result);
     }
    });
});

类似于此的内容应该适合您，但可能需要进行一些调整，并且可能有更有效的方法来获取 view 查询的值。

这样做的目的是，使用 event，它将阻止锚点默认操作发生。然后我们从单击的 link 中获取 href，并使用它来获取 view 查询。有了这个，我们然后 ajax 到 url 中带有该查询的页面，并从呈现的内容中获取 #messageList HTML 内容，然后返回页面，我们更改当前的 #messageList HTML 到新的 #messageList HTML

为了使拆分更直接，您可以使用：

<a href='?view=inbox&show_all' data-view="inbox" class='small'>" . $remaining . "</a>

那么你只需要：

var view = $(this).data('view');

而不是使用 var href、var hrefSplit、var viewSplit。

在 url 中传递参数时如何使用 AJAX 停止页面刷新

How can I use AJAX to stop page from refreshing when passing parameters in url

javascript

php

ajax

jquery

免责声明：

上下文：

我需要什么帮助：