CODEWITHSUNDEEP
phpjqueryajaxjson
mohur
mohur

Reputation: 1895

jquery ajax does not working when returning with php json_encode

SOLVED

problem solved, please see bottom answer for my solution

i've been struggling with this, i read tutorials about $.ajax()

here's the script

<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(
        function()
        {
            $('#getData').click(
                function()
                {
                    $.ajaxSetup({
                        cache: false
                    });
                    $.ajax(
                    {
                        type: 'GET',
                        url: 'http://localhost/Practice/Jquery/ajax/phone_data.php',
                        data: {rating: 5},
                        dataType: 'json',
                        success: function(data)
                        {
                            $('#display').html(data.phone);
                        },
                    error: function(response)
                    {
                        alert(response.responseText);
                    }
                    });//end ajax

                });//end click
        });//end ready
</script>

<body>
                <input type="button" id="getData" name="submitButton" value="getJson!" />

    <div id="display">
        replace me with phone data
    </div>
</body>

and this is the phone_data.php

<?php
header('Content-Type: application/json; charset=utf-8');
$data['phone'] = '989898989';
$data['username'] = 'sendyHalim';
echo json_encode($data, true);
exit();

when i click the button, firebug displays the request is OK, but nothing happens..

so i check the 'response' for the ajax call through firebug and get : 

Reload the page to get source for: http://localhost/Practice/Jquery/ajax/phone_data.php?rating=5&_=1368793325734

Update i updated my code , i search some way around to get the response text(using responseText property from response), but it just alert with empty string(nothing).

here's the output when i run phone_data.php script alone:

{"phone":"989898989","username":"sendyHalim"}

and "view page info" from firefox confirms that the content-type is "application/json"

Upvotes: 1

Views: 9472

Answers (3)

vincent
vincent

Reputation: 293

I copy-pasted your code and replaced the url for the json request.

Take a look at the JSON URL. http://echo.jsontest.com/key/value/one/two

And the jQuery code that I modified a bit for the html output.

$(document).ready(function () {
    
    $('#getData').click(function () {
        
        var jsonUrl = 'http://echo.jsontest.com/key/value/one/two';
        $.ajaxSetup({
            cache: false
        });
        $.ajax({
            type: 'GET',
            url: jsonUrl,
            data: {},
            dataType: 'json',
            success: function (data) {
                $('#display').html(data.one + ' and ' + data.key);
            },
            error: function(xhr){
                $('#display').html('error fetching data');
            }
        }); //end ajax
    }); //end click
}); //end ready

Here is your code : http://jsfiddle.net/wuaNC/

Upvotes: 1

mohur
mohur

Reputation: 1895

SOLVED

Guys it's my mistake LOL! Just for education, if you have the same problem as me (script is correct etc etc)... The problem is that I'm opening display_json.html from a local file. This means I right click the file then open with firefox. When I open it through localhost/pathToYourScript, however, it will run.

One thing I don't get is that if I open it from a local file using a url that pointing to another domain (like the one in the vincent's answer) it works, but when I use my local url, it doesn't.

Thanks for the tips and answers, you guys really helped me out.

Upvotes: 1

Faron
Faron

Reputation: 1243

Try to global your scripts for UTF-8?

Upvotes: 0

Related Questions