CODEWITHSUNDEEP
javascriptphpjqueryajax
George George
George George

Reputation: 187

AJAX GET simple PHP Multiple variables

I need a simple way to retrieve multiple PHP variables into html divs. I searched a lot of posts but I can't found an answer.

I am looking for something like this:

go-to-index.php

<?php
    $name = 'Jonh';
    $phone = '123456789';
    $details = 'Detail about';
?>

index.php

<div class="name">Your Name is : <?php echo $name; ?></div>
<div class="phone">Your Phone Number is : <?php echo $phone; ?></div>
<div class="details">Your Details are : <?php echo $details; ?></div>

I want instead of echo to get them via AJAX Call.

What is the correct AJAX REQUEST syntax to do that?

UPDATE

My bad I do not noticed before but forgot to say I also need to load the calls one by one. I have too many requests and take a lot of time.

May the query .each() function should work like I want?

Upvotes: 0

Views: 1561

Answers (2)

scrowler
scrowler

Reputation: 24406

You need a PHP script that will output JSON containing the values you want, and you need a Javascript handler to ask for that data and do something when it gets it. Here's an example:

# File: go-to-index.php
<?php

$name = 'Jonh';
$phone = '123456789';
$details = 'Detail about';

echo json_encode(
    [
        'name' => $name,
        'phone' => $phone,
        'details' => $details
    ]
);

Then your HTML page:

<!-- File: index.php -->
<div class="name">Your Name is : <span class="container"></span></div>
<div class="phone">Your Phone Number is : <span class="container"></span></div>
<div class="details">Your Details are : <span class="container"></span></div>

<button class="loadMe" type="button">Click here to make things work</button>

And finally your jQuery:

$(document).ready(function() {
    $('.loadMe').click(function() {
        $.ajax({
            // Path to your backend handler script
            url: 'go-to-index.php';
            // Tell jQuery that you expect JSON response
            dataType: 'json',
            // Define what should happen once the data is received
            success: function (result) {
                $('.name .container').html(result.name);
                $('.phone .container').html(result.phone);
                $('.details .container').html(result.details);
            },
            // Handle errors in retrieving the data
            error: function (result) {
                alert('Your AJAX request didn\'t work. Debug time!');
            }
        });
    });
});

You can do this on any event - the button was just an example. You can also use plain Javascript or any other library, just used jQuery since you tagged it in your question.

Upvotes: 0

James Pederson
James Pederson

Reputation: 404

In your PHP:

<?php
echo json_encode(Array(
    'name' => "John",
    'phone' => "1234567890",
    'details' => "Details about..."
));

Your HTML:

<div class="name">Your Name is : <span class="name_value"></span></div>
<div class="phone">Your Phone Number is : <span class="phone_value"></span></div>
<div class="details">Your Details are : <span class="details_value"></span></div>

Your jQuery:

$(document).ready(function(){
    $.getJSON('user-info.php',function(data){
        $(".name_value").html(data.name);
        $(".phone_value").html(data.phone);
        $(".details_value").html(data.details);
    });
});

Note: you'll set the user-info.php string to the URL (relative or absolute) of your PHP script that grabs the user info.

Upvotes: 1

Related Questions