jquery ajax does not working when returning with php json_encode

Question

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"

Stick an error callback function on your AJAX call and see what error jQuery is reporting. — Anthony Grist
– Anthony Grist, Commented May 17, 2013 at 12:27
You should be able to see the response in the console tab of Firebug without reloading. — Jay Blanchard
– Jay Blanchard, Commented May 17, 2013 at 12:30
and could you print the content you see in browser when you open the JSON fie? — Sina R.
– Sina R., Commented May 17, 2013 at 12:32
@AnthonyGrist i updated my code with function to display error, but it displays nothing.. @JayBlanchard from console tab, there's no response in the console tab(response section) @imsiso i can't anyway its not json file, before im doing this (script above) i've been using $.get and when i display the json response, it displays undefined(with the same php script) — mohur
– mohur, Commented May 17, 2013 at 12:36
BTW you don't need header('Content-type: application/json'); and add exit(); at the end after echo json_encode.. and try — bipen
– bipen, Commented May 17, 2013 at 12:36

limeandcoconut · Accepted Answer · 2015-02-07 10:25:02Z

1

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.

edited Feb 7, 2015 at 10:25

limeandcoconut

4086 silver badges22 bronze badges

answered May 17, 2013 at 13:32

mohur

1,8954 gold badges18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adriano G. V. Esposito · Accepted Answer · 2021-02-10 00:17:32Z

1

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/

edited Feb 10, 2021 at 0:17

Adriano G. V. Esposito

3834 silver badges11 bronze badges

answered May 17, 2013 at 12:42

vincent

2933 silver badges15 bronze badges

2 Comments

vincent Over a year ago

And don't forget to parse your PHP Array properly. Modify your json_encode($data) to "json_encode($data,true)".

mohur Over a year ago

hi im using your code and it displays correctly using the url, but when i change url to my url : http://localhost/Practice/Jquery/ajax/phone_data.php it doesnt display anything(response is empty), i edited my php script in the thread above

Faron · Accepted Answer · 2013-05-17 12:39:15Z

0

Try to global your scripts for UTF-8?

answered May 17, 2013 at 12:39

Faron

1,24311 silver badges20 bronze badges

Collectives™ on Stack Overflow

jquery ajax does not working when returning with php json_encode

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related