Using jQuery's .get() to retrieve PHP data

Question

I'm using jQuery's .ajax() to post to a PHP file called process.php. Process.php has a lot of code in it, but for simplicity's sake, let's just say it contains <?php echo 'hello'; ?>.

Is this the proper jQuery to insert process.php's results into div.results? :

$.get('process.php', function(data) {
    $('.results').html(data);
});

So far it doesn't seem to be working.

Here's the HTML/Javascript file

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("form#form").submit(function() {
                var username = $('#username').attr('value');
                $.ajax({
                    type: 'POST',
                    url: 'process.php',
                    data: 'username=' + username,
                    success: function() {
                        $('form#form').hide(function() {
                            $.get('process.php', function(data) {
                                $('.results').html(data);
                            });
                        });
                    }
                });
                return false;
            });
        });
    </script>

</head>

<body id="body">

<form id="form" method="post">
    <p>Your username: <input type="text" value="" name="username" id="username" /></p>
    <input type="submit" id="submit" value="Submit" />
</form>

<div class="results"></div>

</body>

</html>

Here's process.php (greatly simplified):

<?php
    /* get info from ajax post */
    $username = htmlspecialchars(trim($_POST['username']));
    echo $username;
?>

$('.results').html(data); is right but it depends what exactly you want to do....there are other ways also like load,append,prepend n after...can you provide more information about the div — Dharmesh
– Dharmesh, Commented Apr 21, 2011 at 5:12

alex · Accepted Answer · 2011-04-21 05:23:49Z

5

If you simply want to place the resulting string back into an element, use load().

$('.results').load('process.php');

However, looking at your code...

$.ajax({
    type: 'POST',
    url: 'process.php',
    data: 'username=' + username,
    success: function() {
        $('form#form').hide(function() {
            $.get('process.php', function(data) {
                $('.results').html(data);
            });
        });
    }
});

...shows you have misunderstood something. The correct anonymous function to assign to the success callback would be...

function(data) {
   $('form#form').hide()
   $('.results').html(data);
}

edited Apr 21, 2011 at 5:23

answered Apr 21, 2011 at 5:08

alex

492k205 gold badges890 silver badges992 bronze badges

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

4 Comments

austinbv Over a year ago

Yuck why are you using load. I would think you only use load if you are getting content you want to add to the page.

austinbv Over a year ago

Whoops :P I assumed he was just processing... I guess that's what they say about assuming

altrier Over a year ago

Well, there's extra json processing in process.php. It takes username, filters some API queries based on that data, and returns some values. What is displayed in ".results" is that processed data. I should have been more clear.

austinbv Over a year ago

If you are returning json data and then processing it with javascript you should not use .load() if you are returning a processed html in $results then you should use load()

rm- · Accepted Answer · 2012-08-05 22:23:42Z

0

You could try something like this.

function ajax_login() {
    if ($("#username").val()) {
    $.post("/process.php", { username : $("#username").val() }, function(data) {
    if (data.length) {
        $("#login_form").hide();
        $("#login_result").html(data);
        }
    })
    } else {
        $("#login_result").hide();
    }

Then in process.php just echo out some text if the post sucesses.

process.php =>

if (isset($_POST['username'])
{
    echo 'hello '.$_POST['username'];
}

answered Aug 5, 2012 at 22:23

rm-

1281 gold badge1 silver badge10 bronze badges

Collectives™ on Stack Overflow

Using jQuery's .get() to retrieve PHP data

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