Using jQuery AJAX to pass JSON Object to PHP file

Question

I have a JSON object like this (assigned to var card;):

{
    card_no: "1", 
    card_name: "wwwgdefonru",  
    img_id: 1, 
    img_thumb: "albums/070915_E239/thumbs/001_wwwgdefonru.jpg", 
    img_hires: "albums/070915_E239/thumbs_hires/001_wwwgdefonru.jpg"
}

I want to pass this using AJAX to a php support file.

Here's my AJAX call:

jQuery.ajax({
    method: 'POST',
    url: ajax_file,
    type: 'JSON',
    data:  card,
    dataType: 'html',
    cache: false,
    success: function(html){
        console.log('SUCCESSO');
        jQuery('#debug').html(html);    
    },
    complete:function(){
        console.log('COMPLETE');
    }
});

In my PHP file (just for debugging purposes) I output the passed data like so:

echo '<pre>';
    print_r($_POST);
echo '</pre>';

The AJAX call completes successfully. But the output is blank:

Array
(
)

Where am I going wrong with this?

SOLUTION

I am working on a project with an old version of jQuery (don't ask...). From looking at the docs (http://api.jquery.com/jquery.ajax/) I could see that setting the method using method: 'POST' wasn't working because it isn't supported by the version of JQ I am using. Switching it to type: 'POST' and getting rid of type: 'JSON' fixed it.

I wouldn't have spotted this had I not looked at the network tab and seen the request Method was GET even though I have defined it as POST.

type is an alias for method. Use one or the other and don't give it the value "JSON". — Quentin
– Quentin, Commented Sep 7, 2015 at 14:11
Don't use contentType: 'application/json',. You aren't sending JSON. — Quentin
– Quentin, Commented Sep 7, 2015 at 14:11
Look at the Net tab in your developer tools. Look for the Ajax request. Does it have the data in it you expect? Is it going to the right URL? — Quentin
– Quentin, Commented Sep 7, 2015 at 14:12

nifCody · Accepted Answer · 2015-09-07 13:55:07Z

-1

The method of writing post method is in this way is so easy for you

$.post("your_php_file_url.php",
    {
        card_no: "1", 
        card_name: "wwwgdefonru",  
        img_id: 1, 
        img_thumb: "albums/070915_E239/thumbs/001_wwwgdefonru.jpg", 
        img_hires: "albums/070915_E239/thumbs_hires/001_wwwgdefonru.jpg"
    },
    function(data, status){
        alert("Response Message" + data + "\nResponse Status: " + status);
    });

In your PHP site you read the values using

<?php
     echo $_POST['card_no'];
?>

like this you could get other values and do your works!

answered Sep 7, 2015 at 13:55

nifCody

2,4523 gold badges37 silver badges57 bronze badges

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

1 Comment

Quentin Over a year ago

While starting again from scratch might solve the problem, its hard to be sure unless you can identify the actual problem with the existing code.

Collectives™ on Stack Overflow

Using jQuery AJAX to pass JSON Object to PHP file

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related