Using Ajax to Send Data Back to the Server

Question

I understand there is a method send for xmlHttpRequest objects, but I've been working on this site all day and I'm unable to find any halfway decent tutorials on the subject and my brain feels like mush. Ajax is hard.

What I'm trying to do is send data from one Javascript file back to a PHP script on the server, where the data is simply a string and a small number. Is this possible? Why can't I find a good article on the subject?

tl;dr How do I use the send method to pass a string and a number from a javascript file to a php file?

Answer 1

It's definitely possible. This is a really nicely organized tutorial that walks you through the XmlHttpRequest object, how to set it up, and how to consume it on the server.

The server-side code is PHP, and I'm more of a C# guy, and it made total sense to me. (Maybe I should switch to PHP??).

I hope this helps! Good luck.

EDIT: In response to a previous SO question, I put this jsfiddle together to demo how to use XmlHttpRequest. Hope this also helps.

Answer 2

Using jQuery, you can use the post method:

$.post("test.php", { name: "John", number: 2 } );

Behind the scenes, this uses xmlHttpRequest, have a look at the source to see how they do it.

Answer 3

step 1: get jquery. all you have to do is download the latest file and include it on your page.

step 2: make 2 files:

somepage.html:

<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$.get("someScript.php", 
  // data to send if you want
  {
    'someVar' : 'someValue'
  },
  // receive and do something with response
  function(response){
    alert(response);
 } // function (response)
); // .get()
</script>

someScript.php

<?php
  echo $_GET['someVar'] . " response!";
?>

step 3: upload all your files to your server and go to somepage.html

That's all there is to it. Though, you would generally put that code inside some kind of onclick or whatever, depending on what you want to use ajax for. But the comments in there are pretty self explanatory. jquery is used to make the ajax request, with an example of sending data to the server-side script receiving the request (using GET method). You would do whatever in someScript.php but in this example, it simply echoes back the value you sent. Then jquery takes what someScript.php echoes out and just throws it in a popup.

Answer 4

Why don't you user jQuery or similar library?

Sending a variables with jQuery will be simple as that:

$.post("save.php", { name: "John", time: "2pm" } );

In your save.php file you can handle POST variables as you wish:

$name = $_POST["name"];
$time = $_POST["time"];

You can check it out: http://jquery.com/

I think you are wasting your time trying to make self made methods ...

Answer 5

lots of good links here, so I'm not going to add to that. Just as a sidenote, you're dealing with a light case of ajaxness here :) - typically you'd want to send something back from the server that changes the state of the page in response to what was sent from the page in the first place (in fact one might argue why you need ajax in the first place and not simply post, if the page's not supposed to change - but I can see how there might be situations where you'd want ajax anyway). I'm just saying that because you're going to encounter a lot of content about how to deal with the stuff sent back from the server - just making sure you're aware that's not needed for what you're trying to do (I'm always glad when I know what I can leave out in the first pass ;)