Jquery send data to PHP and receive data

Question

I have a PHP script calling an API which takes a while to load, consequently users do not see the page for a while and believe something went wrong.

I have been informed that a Jquery script can send data to the PHP file, get the resulting data from it and display a loading message/animation while this is being performed. Looking around the Internet I found this:

$.get("check.php", { url: "www.domain.com"}, function(data){
    alert("Data Loaded: " + data);
});

I've not been able to figure out how the PHP file needs to receive the sent data ($_GET['url'] or otherwise) or how to receive and display the data and how to display a loading message. A lot of questions I know, but I would be very grateful for any information to understand how to do this.

Yes, `$_GET['url']` should work just fine. What do your browser tools tell you? Is the request happening? — Brad, Sep 22 '12 at 16:19
http://stackoverflow.com/a/68503/201788 - You can look at this answer from another similar question. It basically says what @tdlm said. — , Sep 22 '12 at 16:24
Open your browser Developer tool (for Chrome it's F12; for Firefox download Firebug addon; for Opera Ctrl+Shift+I; for IE - just delete it). Then open Network tab, reload page. You will see all files that where loaded on client side, find 'check.php', click on it and there you can se what date you send, headers and responses. It is very useful for debuging such methods — Minimihi, Sep 22 '12 at 16:25
Yes the request is happening, just not sure how to get the data from it and display a loading message. — Paul, Sep 22 '12 at 16:28

score 5 · Accepted Answer · answered Sep 22 '12 at 17:01

5

With the help of everyone who responded to this post this is the working result:

<div id="content-area"><p>loading content...</p></div>

<script type="text/jscript">    
    $.get("check.php", { url: "www.domain.com"}, function(data){
    $("#content-area").html(data)
    });
</script>

The PHP receives the data with a GET method and returns data with echo.

Thanks everyone for your help :)

answered Sep 22 '12 at 17:01

Paul

2,164
7
29
52

What is the domain.com for? Can you explain with a little more detail? – Papa De Beau Feb 21 '13 at 07:15

score 2 · Answer 2 · edited Sep 22 '12 at 16:27

2

The way to do this is to display a loading message/animation by default and then, once it does get loaded, your jQuery $.get() method would fill in the content.

For check.php to receive the data from jQuery, it gets treated like any other GET request to the script. In this case, it would be like going to check.php?url=www.domain.com and whatever output is generated would get received in the 'data' parameter.

edited Sep 22 '12 at 16:27

answered Sep 22 '12 at 16:20

tdlm

597
3
13

I think the problem he's having is on the PHP end, not on the client side. – Brad Sep 22 '12 at 16:21
I believe that his PHP script takes a while to return data and in the intermediate he wants to show a loader or something to inform users that something is going on. – Sep 22 '12 at 16:23
It seems like he's having problems on both sides -- displaying the loading animation while he waits for the data and then understanding where the data comes from and why. – tdlm Sep 22 '12 at 16:26
You are right I understand how the PHP functions but I don't get how I display the results of the PHP function and how to display the loading message/animation until the PHP returns something. – Paul Sep 22 '12 at 16:30
You have to create loading message before .get() is initialized. When .get() request is completed, you destroy loading message or create result message – Minimihi Sep 22 '12 at 16:34
Brilliant. I have got it working with the exception of actually retrieving the data from the PHP file. – Paul Sep 22 '12 at 16:48

score 0 · Answer 3 · answered Sep 22 '12 at 16:39

// On some sort event, here click is used for example
$('button').click(function() {
   // start loading message
   console.log('loading...');
   // start request
   $.get("check.php", { url: "www.domain.com"}, function(data){
       // this part is triggered when request is successful
       console.log('LOADED');
       // shows what was echo'ed on php file
       console.log(data);
   });
});

console.log() show messages in Developer Tools console

Jquery send data to PHP and receive data

3 Answers3