Get php variable in JavaScript - options

Question

I'm aware that there are similar questions, however, I have a few issues with them, as they mentioned a few possibilities and I'm not sure which one is best for my situation.

I have a form that has one section where you can enter the name of an xml-file, which is then generated using php. The name of the file is stored in a variable using php. In order to access the xml-file, I wanted to retrieve the value of the php-variable in JavaScript. According to what I read, there are a few possibilities:

An Ajax-request. My problem: I tried to follow this tutorial (https://www.w3schools.com/xml/ajax_php.asp). I don't fully understand this tutorial though.

First of all, in the first example, what is "this"? (e.g this.responseText)
Secondly, why is it "gethint.php?q=" + str instead of simply "gethint.php" (in xmlhttp.open())?
Finally, what does $q = $_REQUEST["q"]; tell me exactly? I know that some kind of a variable is declared but I don't understand what is does exactly.

I also read that you could use cookies, but would that make sense in my instance? Please let me know if you need further information and thank you very much in advance for your replies.

Edit: Here's the code I tried to follow: HTML:

<html>
<head>
<script>
    function showHint(str) {
        if (str.length == 0) { 
            document.getElementById("txtHint").innerHTML = "";
            return;
        } else {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "gethint.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>

    <p><b>Start typing a name in the input field below:</b></p>
    <form> 
        First name: <input type="text" onkeyup="showHint(this.value)">
    </form>
    <p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

PHP:

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from "" 
if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            } else {
                $hint .= ", $name";
            }
        }
    }
}

// Output "no suggestion" if no hint was found or output correct values 
echo $hint === "" ? "no suggestion" : $hint;
?>

$a is an array of names, which I did not include in the extract in order to save space.

Here's my code:

HTML:

<body onload="alertFunction()">
    <h1 id="title">Append to me:</h1>
    <p id="paragraph"></p>
</body>

JavaScript:

function alertFunction() {
    var xhttp; 

    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var filename = xhttp.responseText;
            alert(filename);
        }
    };
    xhttp.open("GET", "profile3.php?q=", true);
    xhttp.send();
};

PHP:

<?php
    $q = $_REQUEST["q"];
    echo $filename 
?>

$filename is declared to be the name of my xml-document. I did not include that piece of code because I know that that's not the problem.

no cookies in this case, but man you have to learn more stuff and come here on SO with some concise technical questions that will help you better then if we just post you some example code.. — Kresimir Pendic, Nov 13 '17 at 09:59
`this `usually refers to the DOM element that's the subject of the function being called (for instance, in an event callback). — helpdoc, Nov 13 '17 at 10:01
@KresimirPendic well I just started learning php and I also stated my specific questions so I don't really see the problem? Thank you for the hint though, it's noted — A.S.J, Nov 13 '17 at 10:01
Include the code you have questions about in your question; don't just vaguely refer to external resources. — deceze, Nov 13 '17 at 10:17

score 0 · Answer 1 · answered Nov 13 '17 at 10:01

0

I would have to say the w3schools isn't the best resource. But anyway:

First of all, in the first example, what is "this"? (e.g this.responseText)

XMLHttpRequest is an object and it has properties. this is used to access the XMLHttpRequest object properties in the scope of its event handler (onreadystatechange).

Secondly, why is it "gethint.php?q=" + str instead of simply "gethint.php" (in xmlhttp.open())?

It's a matter of usage but in this example you want to send data to the server side, then the server-side's script does something with this data and returns a response. So you're passing the str variable with a query string.

Finally, what does $q = $_REQUEST["q"]; tell me exactly? I know that some kind of a variable is declared but I don't understand what is does exactly.

In continuation to the previous point, now it's the server's side script turn to get the data we've sent in the ajax request. q is the query string variable. (?q=something) and by using $_REQUEST['q'] the script will be able to access to that value. so if $q = $_REQUEST['q'], now $q would be "something".

answered Nov 13 '17 at 10:01

Ofir Baruch

10,323
2
26
39

So, the q in $q=$_Request["q"] could be another variable or a string etc., whatever data I want JavaScript to receive? Also, thank you very much that was very helpful – A.S.J Nov 13 '17 at 10:12
Exactly, you can use "?yy=" + str in the ajax request and then in the php script you would use "$variableNameYoudLike = $_REQUEST['yy']" – Ofir Baruch Nov 13 '17 at 10:13
In case my answer helped you please consider up voting and accepting it. thanks. – Ofir Baruch Nov 13 '17 at 10:14
Sorry for commenting but I have another question, I've been trying to make it work for hours now. I simply don't know how to implement the code to make it work for me. What I want to do, is to simply display the value of a php-variable. I know the necessary JavaScript-code, but what do I need to do in php to make it work? I tried $q = $_REQUEST["p"] and echo $filename (which is the variable I need in JavaScript) but it won't work – A.S.J Nov 13 '17 at 12:54
I don't see a variable named "filename" in your code, consider adding an update to your question and add the updated code and question. – Ofir Baruch Nov 13 '17 at 12:56
I added my code (the code I posted previously was the example that I tried to follow) – A.S.J Nov 13 '17 at 13:04
It's not how ajax works, consider reading more materials and tutorials regarding ajax and PHP to understand the process and how it works. you're lacking several fundamentals in the subject. – Ofir Baruch Nov 13 '17 at 13:07
I'm aware that I'm lacking several fundamentals and I usually only use Stack overflow as last resort, however, all tutorials I found used jQuery, which I do not want to use – A.S.J Nov 13 '17 at 13:08
Check the following: https://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery and this one: https://stackoverflow.com/a/30414515/998096 – Ofir Baruch Nov 13 '17 at 13:20
nvm I think I figured it out in a different way – A.S.J Nov 13 '17 at 14:08

score 0 · Answer 2 · answered Nov 13 '17 at 10:09

1. First of all, in the first example, what is "this"? (e.g this.responseText)

As simple, "this" evaluates to the value of the ThisBinding of the current execution context;ref

2. Secondly, why is it "gethint.php?q=" + str instead of simply "gethint.php" (in xmlhttp.open())?

This is nothing just passing the input value to server to get the matching result.This will treat as GET method

3.Finally, what does $q = $_REQUEST["q"]; tell me exactly? I know that some kind of a variable is declared but I don't understand what is does exactly.

This is php code to get the value form POST/GET method. From 2 the parameter is passing to serve. This can access from server using $_REQUEST["q"]

Get php variable in JavaScript - options

2 Answers2