Refresh data without reloading the page
Stefan Bogdanescu
Founder & Senior Architect · 2026-06-29
# Refresh Data Without Reloading the Page: Mastering Asynchronous Updates with AJAX
As developers building modern web applications, one of the most fundamental interactions users expect is instantaneous feedback. When a user clicks a button or submits a form, they expect the data to update without the entire page flickering or reloading. The scenario you've presented—adding a like and then immediately reloading the page—is a classic example of defeating the purpose of Asynchronous JavaScript and XML (AJAX).
In this post, I will walk you through how to achieve dynamic content updates on the fly, using your existing Laravel/Blade setup as a foundation, by replacing the full page reload with a targeted AJAX response. We will look at why this approach is superior and how it aligns perfectly with modern API-driven architectures like those found in frameworks such as Laravel.
## The Flaw in `window.location.reload()`
Your current implementation uses JavaScript to trigger a POST request, which successfully updates the data on the server (by setting cookies), but then immediately calls `window.location.reload()`. While this forces the page to fetch fresh data from the server, it causes a jarring user experience. It wastes bandwidth, delays interactivity, and is inefficient compared to fetching only the required piece of information.
The goal of an AJAX request should be not just to *send* data, but also to *receive* an updated state that allows you to manipulate the Document Object Model (DOM) without disrupting the user's current view.
## The Asynchronous Solution: Handling the Response
The key to refreshing content dynamically lies entirely in how your frontend JavaScript handles the response from the backend. Instead of triggering a full reload, we will use the data returned by the server to selectively update the elements that need changing.
### Step 1: Modifying the AJAX Success Handler
We need to change the `success` function in your JavaScript to parse the JSON response and use it to update the relevant HTML elements directly.
Here is how you can refactor your existing script to achieve a smooth, dynamic update:
```javascript
$(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
},
});
$('.like-button').on('click', function(event) {
event.preventDefault();
let href = $(this).attr('href');
$.ajax({
url: href,
type: 'POST',
success: function(response) {
// 1. Check the response status
if (response.status === 'success') {
// 2. Extract the dynamic data returned from the server
const cookieData = response.cookie_json;
// 3. Update the specific DOM elements instead of reloading
updateLikeCount(response.message, cookieData);
} else {
// Handle error responses
alert('Error: ' + response.message);
}
},
error: function(xhr) {
console.error("AJAX Error:", xhr.responseText);
alert("An error occurred while liking the article.");
}
});
});
function updateLikeCount(message, cookieJson) {
// Example: Find the element holding the like count for this specific button type
const button = $(this);
const iconCountDiv = button.closest('.comments-sub-header__item-icon-count');
if (iconCountDiv.length) {
// Assuming you want to display the new count from the cookie data
iconCountDiv.html(cookieJson);
console.log(message); // Log success message for debugging
}
}
});
```
### Step 2: Backend Preparation (The Laravel Foundation)
Your existing backend logic is already well-structured for this approach. By returning JSON, you are providing the client with exactly what it needs to update itself, which is the core principle of building a robust API.
In your `ArticleController@postLike` method, ensure the response clearly communicates success and provides any necessary state information (like the updated cookie data). Your current implementation does this perfectly by returning JSON:
```php
// ArticleController.php snippet
// ... inside postLike method
return response()->json([
'message' => 'Liked the Article ' . $article->id . ' with ' . $type . '.',
'cookie_json' => $cookie->getValue(), // Crucial data for the frontend update
])->withCookie($cookie);
```
This separation of concerns—where the server handles persistence (cookies) and the client handles presentation (DOM manipulation)—is a cornerstone of scalable application design. When working with complex relationships or state management in Laravel, leveraging dedicated routes and JSON responses is highly recommended, as promoted by principles found on the [Laravel Company website](https://laravelcompany.com).
## Conclusion: Embracing True Asynchronicity
By shifting the focus from reloading the entire page to managing asynchronous data flow, you transform a clunky interaction into a fluid, responsive experience. Instead of forcing a full refresh, you are now making targeted requests that exchange small packets of data, resulting in faster performance and a superior user experience. Always aim for APIs that return precisely the information needed, allowing the frontend to manage its own state updates efficiently.