• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1250
  • Last Modified:

Send jquery data to a php file using ajax

Hi E's, I have a script write in jquery, that contain a variable (send), and I want to send that variable to a php file (receive.php), using ajax.
The objective is understand how Ajax send data (not fetch) between files.
What I need is when I click in the div info, the contain of variable send, send to the php file for future treatment (maybe send that data to a database).
This is the code of my main file (index.php):
<html>
<head>
<title>ajax example</title>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script>
var send;
send = "00:11:44";
$(document).ready(function(){ 
$("#info").click(function(){ 
        $(this).html(send); 
    }); 
 }); 
</script>
<div id="info">444</div>
</body>
</html>

Open in new window

How I send the variable 'send' to the receive.php file using ajax.

The best regards, JC
0
Pedro Chagas
Asked:
Pedro Chagas
  • 3
  • 2
  • 2
  • +2
5 Solutions
 
Ray PaseurCommented:
Have a look at this page.  I'll see if I have an example in my teaching library.
http://www.w3schools.com/jquery/jquery_ref_ajax.asp
0
 
haloexpertsexchangeCommented:
You can use the jquery post or get functions which will send ajax information as either post or get information.
Its really pretty simple.
http://api.jquery.com/jQuery.post/

http://api.jquery.com/jQuery.get/
0
 
hieloCommented:
<html>
<head>
<title>ajax example</title>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script>
var send;
send = "00:11:44";
$(document).ready(function(){ 
$("#info").click(function(){ 
        $.ajax({ "url":"/path/to/receive.php"
                    ,"data": {"dataSent":send}
                    ,"success":function(data, textStatus, jqXHR){
                          alert( "the server sent the following response" + data );

                          //you can take that data and update some element in your page
                          $('#updatedContent').html(data);
                     }
                 });
    }); 
 }); 
</script>
<div id="info">444</div>
</body>
</html>

on the server, $_POST['dataSent'] will have the value of the send variable.

Open in new window

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Ray PaseurCommented:
Here's my sample.  First, the back-end script on the server.  It returns enough data so that we can see that the script worked.

<?php // RAY_ajax_server.php
error_reporting(E_ALL);
date_default_timezone_set('America/Chicago');

// CONSTRUCT A RESPONSE TO SHOW WHAT WE GOT
$response
= '<b>'
. $_POST['q']
. '</b>'
. ' RECEIVED '
. date('r')
;
echo $response;

Open in new window

Next, the front-end script (web page) that uses jQuery to communicate with the server via an AJAX request.

<?php // RAY_ajax_jquery.php
error_reporting(E_ALL);

// CREATE OUR WEB PAGE IN HTML5 FORMAT
$htm = <<<HTML5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<title>Ajax with jQuery Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
$(document).ready(function(){
    $("#myButton").click(function(){
        $.post(
        "RAY_ajax_server.php", {q : 'My Data'}, function(data){
            $("#quote p").html(data);
        });
    });
});
</script>

</head>
<body>
<div id="myButton">Click Me!</div>
<div id="quote"><p></p></div>
</body>
</html>
HTML5;

// RENDER THE WEB PAGE
echo $htm;

Open in new window

Some explanation...

Line 11 loads the latest version of jQuery.
Line 13 tells jQuery to wait until the document is ready.  This is just the DOM, not all the images, so it will probably be available to run even before the entire web page has been rendered.
Line 15 says, "When there is a click on the element identified by "#myButton" run the following function.
Line 16 says, "Make a POST method request."
Line 17 says, "Post to this URL," send the data that is in braces, and with the response in the variable named "data" run the following function.
Line 18 says, "Locate the element named "#quote" then find the first '<p>' tag; replace its HTML with the contents of the response in the "data" variable.

HTH, ~Ray
0
 
Chris StanyonCommented:
There are a few ways you can do it, depending on how much you need to 'interfere' with the request. If you want full control over the ajax call (including handling the returned data) then you can use the ajax() function.

If you just need something a bit simpler, the jQuery provides a few shortcuts to using ajax(), namely .get(), .post(), .load(). Probably the easiest is something like this:

$('#info").click(function(){ 
     $.post("receive.php", { send: send } );
}); 

Open in new window


Your receive.php script will then receive a POST containing a 'send' key and the value of your variable - it's up to you what you do with that in your script. The example above won't handle any return data from the script.
0
 
Pedro ChagasWebmasterAuthor Commented:
Hi E's, thanks for the answers.
Please don't post more possible solutions, I will test all more few hours.

~JC
0
 
Pedro ChagasWebmasterAuthor Commented:
Hi E's, @ChrisStanyon and @Ray_Paseur solutions work, but the example of @hielo have some problem.
For test the solution of @hielo, I create the file receive.php, that is receive the post data and send a e-mail:
<?
//receive.php
$info = $_POST["dataSent"];
$para = "xxxxx@xxxxxxxxx";
$assunto = "test ajax";
mail($para, $assunto, $info);
?>

Open in new window

and this is the code of index.php:
<html>
<head>
<title>ajax example</title>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script>
var send;
send = "00:11:44";
$(document).ready(function(){ 
$("#info").click(function(){ 
        $.ajax({ "url":"receive.php"
                    ,"data": {"dataSent":send}
                    ,"success":function(data, textStatus, jqXHR){
                          alert( "the server sent the following response" + data );

                          //you can take that data and update some element in your page
                          //$('#updatedContent').html(data);
                     }
                 }); 
    }); 

 }); 


</script>
<div id="info">444</div>
</body>
</html>

Open in new window

The call to receive.php is carried out (I receive the e-mail), but without the variable.
@hielo, can you see please what is wrong?
I like your solution, so I will wait some couple of hours before I close this question.

The best regards, JC
0
 
Chris StanyonCommented:
By default, the ajax() function makes a GET request, not a POST one, so your POST array will be empty. You can either change your script to grab $_GET['dataSent'], or tell ajax to use POST, by setting the 'type' option.

Either:

$info = $_GET["dataSent"];

or

$.ajax({
      url:"receive.php",
      data: {dataSent:send},
      type: "post",
      success: function(data){
            alert( "the server sent the following response" + data );
      }
});
0
 
Pedro ChagasWebmasterAuthor Commented:
Thanks for all.
~JC
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 3
  • 2
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now