Как передать переменную из функции javascript в файл php без перезагрузки текущей HTML-страницы, на которой написана функция javascript?

Question

Как передать переменную из функции javascript в файл php без перезагрузки текущей HTML-страницы, на которой написана функция javascript?

Я занимаюсь разработкой веб-сайта для своего хобби-проекта. Я новичок в PHP, JavaScript и HTML. Пока все работает правильно, т.е. функции javascript взаимодействуют с моим php-кодом, но проблема в том, что браузер также загружает php-файл. Я не хочу загружать файл php. Я просто хочу передать значение тега ввода при нажатии кнопки. Это значение сохраняется в атрибуте значения входного тега, как показано ниже.

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

Я знаю, что эта проблема может быть решена с помощью AJAX. Сейчас я пытаюсь реализовать методы AJAX, как это указано на сайте w3schools.

Ниже я приложил два кода, чтобы понять, что я пытаюсь сказать.

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 отображалась где-то, чтобы я могла видеть, что получено.

-2

ajax javascript php web web-development-server

Решение

Другие решения

Вот рабочий пример с вашим кодом, просто создайте пустой 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 } ?>

0

Источник

Accepted Answer

Попробуйте использовать данные формы, как показано ниже:

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);
}

и получить значение ‘Switch’ из php, используя

$_GET['switch']

0