current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
2

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"

share|improve this question
3  
Stick an error callback function on your AJAX call and see what error jQuery is reporting. –  Anthony Grist May 17 '13 at 12:27
    
You should be able to see the response in the console tab of Firebug without reloading. –  Jay Blanchard May 17 '13 at 12:30
    
and could you print the content you see in browser when you open the JSON fie? –  imsiso May 17 '13 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 May 17 '13 at 12:36
1  
BTW you don't need header('Content-type: application/json'); and add exit(); at the end after echo json_encode.. and try –  bipen May 17 '13 at 12:36

3 Answers 3

up vote 1 down vote

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/

share|improve this answer
    
And don't forget to parse your PHP Array properly. Modify your json_encode($data) to "json_encode($data,true)". –  vincent May 17 '13 at 12:43
    
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 –  mohur May 17 '13 at 12:59
up vote 0 down vote

Try to global your scripts for UTF-8?

share|improve this answer
    
added, but still not working :( –  mohur May 17 '13 at 13:11
up vote 0 down vote

SOLVED

guys its my mistake LOL! just for education, if u have the same problem with me(script is correct etc etc).. the problem is that im opening display_json.html from local file which means i right click the file, then open with firefox.. but when i open it through localhost/pathToYourScript it will run..

one thing i dont get is that if i open it from local file and using an url that pointing to another domain(like the one in the vincent's answer) it works, but when i use my local url, it doesnt

thx for the tips and answers you guys really help me out

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.