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
– Mikey C, Commented Apr 17, 2013 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
– Marc B, Commented Apr 17, 2013 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
– adeneo, Commented Apr 17, 2013 at 14:24

Leonardo Ferreira · Accepted Answer · 2013-04-18 00:59:33Z

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, 2013 at 0:59

Leonardo Ferreira

1063 silver badges10 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 10:25:42Z

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, 2017 at 10:25

CommunityBot

11 silver badge

answered Apr 17, 2013 at 15:01

MrE

1,1543 gold badges14 silver badges28 bronze badges

Comments

Heberfa · Accepted Answer · 2013-04-17 15:10:43Z

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, 2013 at 15:10

answered Apr 17, 2013 at 14:28

Heberfa

4413 silver badges8 bronze badges

3 Comments

Andreas Grech Over a year ago

Seems like the OP needs to do a POST request.

adeneo Over a year ago

It still does a GET request, not a POST request like in the question.

Andreas Grech Over a year ago

@Heberfa: sure, but that data is represented as query string parameters in the request, not as POST data.

Md. Nazrul Islam · Accepted Answer · 2013-04-17 15:31:44Z

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(){}
        });            
    });

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related