issue when post data using ajax in laravel

Question

I am trying to post data using ajax and jquery but the problem arises when i am using post method i am getting result in url just same as get method why is it so. and after hitting controller method an object should return aon cansole but its not

View

 <div class="box-body">
                <form role="form">

                    <!-- select -->
                    <div class="form-group">
                        <label>Select</label>
                        <select class="form-control">
                            <option>option 1</option>
                            <option>option 2</option>
                            <option>option 3</option>
                            <option>option 4</option>
                            <option>option 5</option>
                        </select>
                    </div>
                    <!-- input states -->
                    <div class="form-group has-success">
                        <label class="control-label" for="inputSuccess"><i class="fa fa-check"></i> Input with
                            success</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="Enter ...">
                        <span class="help-block">Help block with success</span>
                    </div>

                    <div class="box-footer">
                        <button type="submit" class="btn btn-info pull-right" id="addMenu">Add Menu</button>
                    </div>
                </form>
            </div>

Script

 <script>
        $(document).ready(function () {

            $('.ourItem').each(function () {
                $(this).click(function (event) {

                    var text = $(this).text();
                    $('#inputSuccess').val(text);
                    $('#delete').show(400);
                    $('#saveChanges').show(400);

                    // console.log(text);
                });

            });

            $('#addMenu').click(function (event) {

              var text = $('#name').val();
              $.post("menu.store", {'text':text}, function(data) {

                   console.log(data);
            });
                });

        });
    </script>

Route

Route::resource('/menu','NavegationController'); 

Controller

   public function store(Request $request)
    {

        return $values = $request->input();

    }

it should return the object but it return url in the console window in the browser

What it returns

Navigated to http://localhost:8080/beautyproductswebapp/Public/?name=rgerge

rgerge is value from my input and name is name of input field

Answer 1

What you're seeing in the console almost certainly doesn't come from your ajax request.

Your "addMenu" button is a "submit" type button (as per your HTML). When you click this, it will automatically submit your form using a normal full page refresh. Chances are this will happen before your ajax request even begins, and certainly before it completes. Even if it did complete, the result would immediately be obliterated by the page refresh caused by the form submission.

The line shown in the console is the result of a standard form submission using GET (this is what happens when you don't specify "action" or "method" parameters in your <form> tag) - it requests the same base URL again, and your form variables become querystring parameters appended to the URL.

To prevent this, you can either

a) Change your button to have a type="button" attribute (instead of type="submit"

or

b) Put event.preventDefault(); as the first line inside your $('#addMenu').click(function (event) { event handler function. This runs a JS method which prevents the default "click" action of the element (in this case, a postback).

This is the cause of your immediate issue. As mentioned in the comments, you may have some further problems down the line with the way you're using the ajax request.

Answer 2

Well your ajax call its a bit weird, url its wrong obviously:

$.post('/menu', function(data) {

       console.log(data);
});

Then the response its wrong also, you would want to cast the object to json since its an ajax call so something along the lines of this:

public function store(Request $request)
{

    .... perform the queries or operations that you want to perform.

    if($request->wantsJson(){

        //Laravel automatically will cast the response to json 

      return response(['status'=>'ok'], 200);
    }   
   return ..view 
}