Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

youngbill's avatar

Implementing Jquery And Ajax in Laravel

How do Implement Jquery And Ajax in Laravel.......?? Thanks

0 likes
11 replies
Cronix's avatar
Cronix
Best Answer
Level 67

Unless you've changed something, laravel already uses jquery.

Just run npm install and npm run dev to compile it.

Then in your main template view, add

<script src="/js/app.js">

Then just use jquery as normal (which has $.ajax() built in)

Another option is just like your materialize css question.

Download it: https://jquery.com/download/

Copy it to /public/js

reference it

<script src="/js/jquery.js">
youngbill's avatar

So will i be able to use the same syntax in Jquery to Select Elements and post them with ajax to a Controller to perform some logics and return a result in Laravel?????????

Cronix's avatar

Yes.

If you have a route like

Route::post('some-endpoint', 'SomeMethod@SomeController');

Then your ajax would just be

$.ajax({
    url: '/some-endpoint',
    method: 'post',
    dataType: 'json',
    data: {
        someKey: someValue,
        anotherKey: anotheValue
    },
    success: function(data) {
        // do something with data returned
    },
    error: function(data) {
        // handle error
    }
});

For all POST/PUT/PATCH/DELETE routes, you will need to add the csrf token (like you do for all forms). It's best to do this globally so all ajax calls will use it and you don't have to set it each time.

So in your main blade template, you'd just create a meta tag

<meta name="csrf-token" content="{{ csrf_token() }}">

And then use jquery's $.ajaxSetup() to set it for all ajax requests.

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

https://laravel.com/docs/5.6/csrf#csrf-x-csrf-token

youngbill's avatar

$(function(){) alert();

Hi $("start").click(function(){ alert(); }) // this didnt work } The alert was working but when i click on the button nothing shows up, i even tried to hide the button..........
toby's avatar

$("start") is not the correct selector:

  • If start is a class name, use $('.start')
  • if start is an id, use $('#start')
  • if you want to select an element, use e.g. $('a')

Basically, you need a correct selector (like in CSS). Click here for more info

Cronix's avatar

Well, you didn't target a classname or id. You targeted a <start> element, which most likely doesn't exist.

<a id="start" href="#">click me</a>

$(function(){
    alert('page loaded');

    // use #start to target id="start"
    $("#start").click(function(e){
        e.preventDefault();
        alert('start clicked');
    });
});

I also cancelled the native click event. This is all basic jquery though and not really anything to do with laravel...

jlrdw's avatar

Sounds like you need to take some basic jQuery lessons there are free videos on YouTube and many free tutorials on the web.

Don't try to learn this stuff in one evening take a few weeks and some basic tutorials first.

Else C will be writing another complete application I think he's almost finished the other one.

Cronix's avatar

Well the start was a button ID

Maybe, but you didn't access it by the id. $('#start) is using id with #

youngbill's avatar

I did that Boss... Wish I could screenshot and send it to u

Cronix's avatar

Well, show your button html, along with your current javascript. Also make sure you force-refresh the browser in between js changes. Is your js in the view, or a standalone js file? Show everything you're doing.

Please or to participate in this conversation.