Pass a data from javascript to PHP without click anything

Question

I need to pass data from javascript to PHP without loading a page or without click anything. When I open the page, It will automatically append the a and b to url. Thanks in advance

Here's my javascript code:

<script>
    var a = "bully";
    var b = "burger";
    window.location.href = "somepage.php?a=" + hello + "&b=" + world;
</script>

Here's PHP:

<?php
    if(isset($_GET['a']) && isset($_GET['b'])){
         echo $_GET['a'] . $_GET['b'];
    }
?>

score 0 · Answer 1 · answered Apr 15 '14 at 02:18

0

The PHP is processed before the page is even sent to the client so the only way to pass information from Javascript to PHP without reloading is through an AJAX call.

answered Apr 15 '14 at 02:18

robjtede

736
5
16

Can you help me with ajax. I'm new to javascript. Thank you – rrr Apr 15 '14 at 02:20
See Leandro's answer. jQuery makes this process simple, especially for beginners. – robjtede Apr 15 '14 at 02:25
Thank you. but is there any way to do this with plain javascript and ajax? – rrr Apr 15 '14 at 02:27
Of course, since jQuery is only a javascript library. TutsPlus has a good screencast for this. http://code.tutsplus.com/articles/how-to-make-ajax-requests-with-raw-javascript--net-4855 – robjtede Apr 15 '14 at 02:28
There is also this good reference over here (besides the one I've mentioned in the other answer's reply): http://codereview.stackexchange.com/questions/28325/implementing-a-cross-browser-ajax-utility-as-an-exercise – leandroico Apr 15 '14 at 02:32

score 0 · Answer 2 · answered Apr 15 '14 at 02:20

0

You can just make an AJAX call. For a shortcut to get there I recommend you to use jQuery for this job. Get it here. Then you just need to do something like this:

var a = "bully";
var b = "burger";
$.get("somepage.php?a=" + a + "&b=" + b);

To see how this "get" function works, click here for the API documentation reference.

answered Apr 15 '14 at 02:20

leandroico

1,207
13
17

Thank you. If possible I don't want to use jquery libray. – rrr Apr 15 '14 at 02:26
In this case check this: http://stackoverflow.com/a/2557268/1170086 -- which is a snippet reference to pure JS use of "AJAX", commonly called XMLHttpRequest (a.k.a XHR). – leandroico Apr 15 '14 at 02:28

score 0 · Answer 3 · edited May 23 '17 at 10:25

I tested this on Google Chrome browser.

script.js

AJAX request uses XMLHttpRequest object. It is well explained here

var a = "bully";
var b = "burger";

var url = 'process.php?a=' +a+ '&b=' +b;

console.log('sending request ...');
var xhr = new XMLHttpRequest();    // create the object

// ajax on load
xhr.addEventListener('load', function(e) {
    console.log('Response loaded: ' +this.responseText);
    document.body.innerHTML = this.responseText;


    // change the url on the address bar
    // pushState(object or string, title, newUrl)
    window.history.pushState({a: a, b: b}, 'Title: ' +a+ ' ' +b, '?a=' +a+ '&b=' +b);
}, false);

// ajax on error
xhr.addEventListener('error', function(e) {
    console.log('Failed to load the response.');
    document.body.innerHTML = 'Failed to load the response.';
}, false);

// open(method, url, isAsynchronous). Should be called after we set all events.
xhr.open('GET', url, true);    // open the connection.
xhr.send();    // send the request.

index.html

Just include the javascript file to do AJAX request.

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <script src="script.js"></script>
    </head>
    <body>

    </body>
</html>

process.php

This script gets the parameters sent by the javascript.

<?php

$a = $_GET['a'];
$b = $_GET['b'];
echo $a. ' ' .$b;

P.S. Edited

Add window.history.pushState() in "load" event to update/change the current url on address bar. See here and here

Thank you. Is it possible if I enter this in url `process.php`, It will automatically append `?a=' +a+ '&b=' +b` ? — rrr, Apr 15 '14 at 03:28
Did you mean to append the parameters (a and b) to the current page url (index.html to become index.html?a=bully&b=burger)? — Bogie, Apr 15 '14 at 03:39
Code updated to use pushState() function. But this will work with modern browsers. :) — Bogie, Apr 15 '14 at 04:09

Pass a data from javascript to PHP without click anything

3 Answers3