Ajax Call in PHP and jQuery

Question

This is my functions.php script containing the following code. The array is encoded into JSON.

functions.php

 $final['custom']['main'] = queryCustom($conn, $id);
 echo json_encode($final);

My global.js has the following code which makes an AJAX request in jQuery:

$.ajax({
            type: "POST",
            url: "functions.php", // file to reach Ajax call
            dataType: "json", 
            data: { 
                action: 'custom',
                id: id,
                  },
                success:
                function(data) {

                setCustom(data.custom);

I want to know what the data contains in function(data)? The setCustom(data.custom), what does this mean here? Can someone provide me an explanation of this please?

Please give me an example

Badshah01
– Badshah01

2016-03-13 13:45:13 +00:00
Commented Mar 13, 2016 at 13:45 — Badshah01
– Badshah01, Commented Mar 13, 2016 at 13:45

Tyr · Accepted Answer · 2016-03-13 14:11:51Z

1

data contains an object literal provided by the server side json_encode(). It's been automatically parsed because the data type is set to json.

example:

PHP:

$final['custom']['main'] = queryCustom($conn, $id);
echo json_encode($final);

Will give the following json string (formatted for better understanding):

{
    "custom": {
        "main":[
            {
                "symbol":"MAP4",
                "official_ID":"112315"
            }
        ]
    }
}

The ajax call above is set to datatype json. jQuery knows if this datatype is set, it will automatically parse the string to an object literal.

Javascript:

$.ajax({
    type: "POST",
    url: "url.php", // file to reach Ajax call
    dataType: "json", 
    success: function(data) {
        var main = data.custom;
        console.log(main); // returns the child object with "main"
    }
});

data contains the initial object, custom is a child object of data and main is a child object of custom.

edited Mar 13, 2016 at 14:11

answered Mar 13, 2016 at 13:49

Tyr

2,7561 gold badge15 silver badges21 bronze badges

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

4 Comments

Badshah01 Over a year ago

Thanks for the informative replay Mr @Tyr. When I echo json_encode($final);, I get the following output: {"custom":{"main":[{"symbol":"MAP4","official_ID":"112315"}]}} Can you edit your answer with regard to my output please ? Then I'll understand at 100%

Badshah01 Over a year ago

Awesome understanding ! Thank you loads Mr Tyr.

Badshah01 Over a year ago

So what is printed on the console.log is the MAP4 and 112315, right ?

Tyr Over a year ago

It is. As you can see main is an array (shown by the [ ] braces) which contains an object with MAP4 and 112315. So if you want to have access to the object you have to use main[0].symbol and so on...

Chaitanya · Accepted Answer · 2016-03-13 13:50:15Z

0

Success: A function to be called if the request succeeds. The function gets passed three arguments:

Data Returned From The Server
Status
jqXHR (XMLHttpRequest Object)

In your PHP code you've added echo json_encode($final); which will be returned if the request is completed successfully. The response will be passed to data which you can later use in your front-end code.

You can read more about $.ajax() at http://api.jquery.com/jQuery.ajax/

answered Mar 13, 2016 at 13:50

Chaitanya

1,6302 gold badges16 silver badges26 bronze badges

Collectives™ on Stack Overflow

Ajax Call in PHP and jQuery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related