5 e.preventDefault();
6 })
7
8 });
Now we have a click event defined, with a callback closure. By providing an event parameter
called e to the inner closure, we can use the e.preventDefault(); method to prevent the default
click action from being performed. In this case the link will not act as a hyper-link. Now we
need to make another HTTP request to GET the new content, and load it into our #content area.
Let’s use the jQuery .get() method to perform this task.
1 // public/js/script.js
2 $(document).ready(function() {
3 $('#load-content').click(function(e) {
4 // prevent the links default action
5 // from firing
6 e.preventDefault();
7
8 // attempt to GET the new content
9 $.get(BASE+'content', function(data) {
10 $('#content').html(data);
11 });
12 })
13 });
Remember the BASE attribute we set earlier? We can use it to build our request URL, and create
a callback method to catch the data that is returned. We will inject the response from our GET
request into the #content element using the .html() method.
That was a lot of hard work wasn’t it? Well at least now we can see our hard work in action,
let’s load up the application at http://localhost and click the load content link. Hopefully it
worked!
So as you can see, using AJAX with Laravel is the same as using any other framework or plain
PHP, just be sure you format the views for your AJAX routes in a suitable manner.