在url中传递参数时，如何使用AJAX阻止页面刷新 - How can I use AJAX to stop page from refreshing when passing parameters in url

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

本文关键字：AJAX 何使用刷新 url 参数 | 更新日期: 2024-01-13

长期潜伏在这里。

免责声明：

首先，很抱歉在这个论坛上提前问了一个可能重复的问题。由于我没有使用ajax的经验，我需要具体说明我要实现的目标。

上下文：

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

页面本身被称为messages.php，看起来如下：[messages.php][1]

正如你在上面的图片中看到的，我在消息列表的底部有一个名为"9 meldinger til"（翻译为"9条更多的消息"）的块链接。此按钮统计每个用户的剩余PM，并在单击时向url添加两个参数：？视图=收件箱&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阻止页面刷新？（这样页面在浏览消息时就不会跳转）

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

要做到这一点，您需要使用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，它将阻止锚点的默认操作发生。然后，我们从单击的链接中获得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。