在url中传递参数时，如何使用AJAX停止页面刷新[关闭]

Question

---

Long time lurker here.

---

DISCLAIMER:

First of all-, sorry in advance for asking what's probably a duplicate question in this forum. Since I have no experience with ajax I need to be specific about what I'm trying to achieve.

---

CONTEXT:

I'm working on a social site for me and my friends to use, and I'm in the process of making a simple personal message system. I'm therefore passing parameters in the url by clicking anchors in order to sort out what messages are being displayed to the user etc.

The page itself is called messages.php and it looks like this: [messages.php][1]

As you can see in the picture above, I have a block link called "9 meldinger til" (which translates "9 more messages") at the bottom of the message list. This button counts the remaining PMs for each user and adds two parameters to the url when clicked: ?view=inbox&show_all.

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

These parameters are fetched using $_GET in php:

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

When I scroll down on messages.php and click "9 meldinger til", the page (obviously) refreshes and jumps back to the top, now having added the parameters to the url.

---

WHAT I NEED HELP WITH:

How do I use ajax to stop the page from refreshing after having clicked the anchor? (So that the page doesn't jump around while navigating messages)

And-, how do I implement it on my page? What would an example code look like?

Answer 1

To do this you would need to use 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);
     }
    });
});

Something similar to this should work for you but will probably need some tweaking and there's probably a more efficient way to get the value of the view query.

What this will do is, using the event, it will prevent the anchors default action from taking place. Then we get the href from the link that was click, and use that to get the view query. With this we then ajax to the page with that query in the url, and take the #messageList HTML contents from what renders, and then back on the page, we change the current #messageList HTML to the new #messageList HTML

To make the split more straight forward you could use:

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

Then all you would need is:

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

Rather than using var href, var hrefSplit, var viewSplit.