如何將變量從 javascript 函數傳遞到 php 文件而不重新加載編寫 javascript 函數的當前 html 頁面？

Question

我正在為我的愛好項目開發一個網站。 我是 PHP、JavaScript 和 HTML 的新手。 到目前為止一切正常，即 javascript 函數與我的 php 代碼通信，但問題是瀏覽器也加載了 php 文件。 我不想加載 php 文件。 我只想在單擊按鈕時傳遞輸入標簽的值。 該值存儲在輸入標簽的 value 屬性中，如下所示。

<input name="switch" class="button" type="button" value="ON" onclick="change(this)" />

我知道這個問題可以通過 AJAX 解決。 現在我正在嘗試實現 w3schools 網站中給出的 AJAX 方法。

下面我附上了兩個代碼，以了解我想說的內容。

function change( el)
{
    if ( el.value == "ON" )
    { 
        el.value = "OFF"; 
        el.style.backgroundColor = "#ff3333"; /* Red */
    }
    else
    { 
        el.value = "ON"; 
        el.style.backgroundColor = "#4CAF50"; /* Green*/
    } // works till here like expected.
     // this proves that HTML code communicates with this function
     // and also there's a value in 'el.value' which is received from the
     // value attribute of the input tag.

    var xmlhttp = new XMLHttpRequest(); // create a xmlhttp object
    xmlhttp.onreadystatechange = function() // create a function to
    // execute when the server response is ready
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
        { // empty 
            }

    }
    //I just want to send the value in 'el.value' to postform.php file
    //In 'postforn.php' file i want to display the received value.
    xmlhttp.open("GET", "postform.php?switch=" + el.value, true)
    xmlhttp.send();
}

這是我試圖執行的 php 代碼。

<?php
$value = $_GET["switch"];
if (empty($value))
{
   echo "Name is empty\n";
} 
else 
{
    echo $value;
}
?>

我希望變量 $value 顯示在某處，以便我可以看到收到的內容。

Answer 1

嘗試使用表單數據如下：

function change( el)
{

if ( el.value == "ON" )
{ 
    el.value = "OFF"; 
    el.style.backgroundColor = "#ff3333"; /* Red */


}
else
{ 
    el.value = "ON"; 
    el.style.backgroundColor = "#4CAF50"; /* Green*/
} // works till here like expected.



var xmlhttp = new XMLHttpRequest();
//form data
fd = new FormData();
fd.append("switch",el.value);


xmlhttp.onreadystatechange = function() 
{
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
    {
        }

}
xmlhttp.open("GET", "postform.php", true)
xmlhttp.send(fd);
}

並使用 php 從 php 中獲取“Switch”值

$_GET['switch']

Answer 2

這是您的代碼的工作示例，只需創建空的 PHP 文件並將此代碼放入其中，然后在瀏覽器中打開控制台（F12 或 CMD+SHIFT + I）

<?php
if (isset($_GET['switch'])) { //here we catch variable from JavaScript
    echo $_GET['switch']; //and here we make response to JavaScript
} else { //if no data from JavaScript then just show the page ?>
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    <button id="button">Press me</button>
    <script type="text/javascript">

        var btn = document.getElementById('button');
        btn.onclick = function () {
            change(btn);
            return false;
        };

        function change(el) {
            if (el.value == "ON") {
                el.value = "OFF";
                el.style.backgroundColor = "#ff3333";
            }
            else {
                el.value = "ON";
                el.style.backgroundColor = "#4CAF50";
            }

            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    console.log(xmlhttp.responseText); // here we got data from PHP
                }
            };
            xmlhttp.open("GET", "postform.php?switch=" + el.value, true);
            xmlhttp.send();
        }
    </script>
    </body>
    </html>
<?php } ?>

如何將變量從 javascript 函數傳遞到 php 文件而不重新加載編寫 javascript 函數的當前 html 頁面？

問題描述

2 個解決方案

解決方案1
0 2016-05-29 06:27:22

解決方案2
0 2016-05-29 06:39:39

如何將變量從 javascript 函數傳遞到 php 文件而不重新加載編寫 javascript 函數的當前 html 頁面？

問題描述

2 個解決方案

解決方案1 0 2016-05-29 06:27:22

解決方案2 0 2016-05-29 06:39:39

解決方案1
0 2016-05-29 06:27:22

解決方案2
0 2016-05-29 06:39:39