How do I retrieve data from .ajax HTTP Request using Jquery and PHP?

Question

I need to retrieve an array from a PHP file which is a SQL query coming back in an array. I've encoded it in with json_encode(); and returned it.

Here is my JS file:

$(document).ready(function() {
$('#indicators').change(function() {
    $('#countries').fadeIn('slow');
    var indic_val = $(this).val();
    var countries = $.ajax({
        url: 'scripts/chart_handler.php',
        dataType: "json",
        type: 'POST',
        data: {'indicator' : indic_val},
        async:false,
        success: (function ( data ){
            console.log(data);
            $.each(data, function(i,key) {
                $('#countries').append('<option value="'+ key +'">'+ key +'</option>');
                    });
               })
         });
    });
});

I am getting inside success tag but data is coming back null. What do I have to use to get the data array?

Have you used Firebug or similar to see if you're getting what you expected back off the Ajax request? — Mikey C, Apr 17 '13 at 14:22
if the `console.log(data)` comes back null, then check that your php script is sending valid json to begin with. — Marc B, Apr 17 '13 at 14:22
If the data is'nt being sent, would'nt it be a great idea to include the function that sends the data, and not the one that receives it ? — adeneo, Apr 17 '13 at 14:24
Try to Debug using firebug. Check chart_handler.php Ajax Response in Net Tab of the same. — Jenson M John, Apr 17 '13 at 14:26
Please post your solution as an answer and mark it as the accepted answer. — Chris Bier, Apr 17 '13 at 18:17
I was trying to do this, Chris. The thing is that as a new user, I can't answer my own question before 8 hours. — Leonardo Ferreira, Apr 17 '13 at 18:26

score 1 · Accepted Answer · answered Apr 18 '13 at 00:59

1

The answer to my problem was simply changing in the PHP script the 'returning or ending' line. It happened thanks to misunderstanding of AJAX.

Change:

return json_encode($array);

for:

echo json_encode($array);

answered Apr 18 '13 at 00:59

Leonardo Ferreira

106
3
10

Heberfa · Answer 2 · 2013-04-17T15:10:43.647

0

You could try use getJSON

$.getJSON('scripts/chart_handler.php')
.done(function( data ) {
  $.each( data, function( i, item ) {

   $('#countries').append('<option value="'+ item +'">'+ item +'</option>');

  });
});

I if you are using FECH ASSOC in your query, you will need use item.namefield where namefield are the name of field you want insted of only item

You may use firebug (a firefox extencion) to debug and see item dom extruture

If you want to send something by get method do as below

$.getJSON('scripts/chart_handler.php',{indicator : indic_val})
.done(function( data ) {
  $.each( data, function( i, item ) {

   $('#countries').append('<option value="'+ item +'">'+ item +'</option>');

  });
});

edited Apr 17 '13 at 15:10

answered Apr 17 '13 at 14:28

Heberfa

441
3
8

Seems like the OP needs to do a POST request. – Andreas Grech Apr 17 '13 at 14:37
It still does a GET request, not a POST request like in the question. – adeneo Apr 17 '13 at 14:57
@Heberfa: sure, but that data is represented as query string parameters in the request, not as POST data. – Andreas Grech Apr 17 '13 at 15:05

score 0 · Answer 3 · edited May 23 '17 at 10:25

0

I think this could be caused by UTF8-BOM (Byte Order Mark). BOM is added to the beginning of the json string which will invalidate it.

Try convert your document to UTF8 without BOM and give it another go.

For further information, please see this other thread on SO: json_decode returns NULL after webservice call

edited May 23 '17 at 10:25

Community

1
1

answered Apr 17 '13 at 15:01

MrE

1,124
3
14
28

score 0 · Answer 4 · answered Apr 17 '13 at 15:31

Use the following code

$('#ddlCountry').change(function(){

        $.ajax({                
            type:'POST',
            url:'<?php echo base_url(); ?>admin_in_action/GetDivisionByCountry.php',
            datatype:'json',
            data:{countryId:this.value},
            cache:false,
            success:function(result){
                $('#ddlDivision').get(0).options.length = 0;
                $('#ddlDivision').get(0).options[0] = new Option("--Select--", "0");

                $.map(result, function(item){
                    $('#ddlDivision').get(0).options[$('#ddlDivision').get(0).options.length] = new Option(item.DivisionName, item.DivisionID);
                });                

            },
            error:function(){}
        });            
    });

How do I retrieve data from .ajax HTTP Request using Jquery and PHP?

4 Answers4