CODEWITHSUNDEEP
phpjqueryjsonlaravellaravel-4
kalatabe
kalatabe

Reputation: 2989

POST-ing JSON to Laravel 4 with jQuery

I've been struggling with this for a while, I checked everything I could think of and I'm sure this should work.. but it doesn't. The idea is simple - you have a form input of type "text". When you type a number in the input and click "Click me!", it should POST the data in JSON format to a Route (handled via Closure), which would then check if the input is in JSON format and if yes, make a database request, then return the data.

Here is my view (table.blade.php)

<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <title>json test</title>
    </head>
    <body>
        <form action="#">
            <input type="text" name="articleID" id="articleid" placeholder="Enter article id" value=""/>
        </form>
        <a href="#" id="trigger">Click me!</a>
        <script>
        $(document).ready(function(){
            var a_id = $("#articleid").val();
            var article = { id: a_id };
            $("#trigger").click(function(){
                console.log(article);
                $.ajax({
                    type: "POST",
                    url: "/json",
                    data: article,
                    dataType: 'json',
                    success: function(data){
                        alert(data.title);
                    }
                });
            return false;
            });
        });
        </script>
    </body>
</html>

And my routes.php

Route::get('json',function(){
    return View::make('table');
});
Route::post('json',function(){
    if (Input::isJson())
    {
        $request = Input::all();
        $article = Article::find($request['id']);
        if (!is_null($article))
        {
            return Response::json($article);
        }
        else return Response::json(['error' => "Object not found"],404);
    }
    else return "not json";
});

I've got two problems with this:

UPDATE Thanks to milz, the first issue is now fixed, I refactored the $(document).ready() function like so:

                $("#trigger").click(function(){
                    var a_id = $("#articleid").val();
                    var article = { id: a_id };
                    console.log(article);
                    $.ajax({
                        type: "POST",
                        url: "/json",
                        data: article,
                        dataType: 'json',
                        success: function(data){
                            alert(data.title);
                        }
                    });
                return false;
                });

Now the object is properly set, however the backend still returns only "not json"... I have no idea what I'm doing wrong here, I will appreciate any help! Thanks in advance!

Upvotes: 2

Views: 1645

Answers (1)

lukasgeiter
lukasgeiter

Reputation: 152900

Input::isJson() actually checks for the Content-Type header of the request. The only thing dataType does is telling jQuery what response to expect.

Try setting contentType

$.ajax({
    type: "POST",
    url: "/json",
    data: article,
    dataType: 'json',
    contentType: 'application/json',
    success: function(data){
        alert(data.title);
    }
});

Upvotes: 4

Related Questions