如何将JavaScript弹窗表单的用户输入保存到PHP变量中？

Absolutely—though we need to remember that JavaScript runs in the user's browser (front-end) while PHP runs on your server (back-end). They don’t directly share variables, so we have to send the input from the front-end to the back-end using an HTTP request. Let’s break down two common ways to do this, plus the key knowledge you’ll need to master this workflow.

Method 1: Submit via HTML Form (Simple, Great for Beginners) #

We’ll capture the prompt input, store it in a hidden form field, then submit the form to a PHP script to save the value as a variable.

Modified HTML/JS Code #

<!DOCTYPE html> 
<html> 
<body> 
<h2>JavaScript Prompt to PHP</h2> 
<button onclick="myFunction()">Try it</button>
<!-- Hidden form to send data to PHP -->
<form id="nameForm" action="save-name.php" method="POST" style="display: none;">
  <input type="hidden" name="username" id="usernameInput">
</form>
<p id="demo"></p> 

<script> 
function myFunction() { 
  var txt; 
  var person = prompt("Please enter your name:", "Harry Potter"); 
  
  if (person == null || person == "") { 
    txt = "User cancelled the prompt."; 
  } else { 
    txt = "Hello " + person + "! Your name is being sent to the server...";
    // Populate the hidden form field with the prompt input
    document.getElementById("usernameInput").value = person;
    // Submit the form to the PHP script
    document.getElementById("nameForm").submit();
  } 
  document.getElementById("demo").innerHTML = txt; 
} 
</script> 
</body> 
</html>

PHP Script (save-name.php) #

This script receives the input and stores it in a PHP variable:

<?php
// Check if the username was sent via POST
if (isset($_POST['username'])) {
  $username = $_POST['username']; // This is your PHP variable!
  
  // Do whatever you need with $username—save to a database, echo it, etc.
  echo "Hello from the server, $username!";
} else {
  echo "No name was submitted.";
}
?>

Method 2: Use AJAX (No Page Refresh, More Interactive) #

If you don’t want the page to reload, use AJAX to send data in the background. We’ll use the modern fetch() API here for cleaner code.

Modified JS Code (Add to Your Existing HTML) #

function myFunction() { 
  var txt; 
  var person = prompt("Please enter your name:", "Harry Potter"); 
  
  if (person == null || person == "") { 
    txt = "User cancelled the prompt."; 
  } else { 
    txt = "Hello " + person + "! Your name is being sent to the server...";
    // Send data to PHP via fetch
    fetch('save-name.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: 'username=' + encodeURIComponent(person) // Encode input to avoid errors
    })
    .then(response => response.text())
    .then(serverResponse => {
      // Update the page with the server's response
      document.getElementById("demo").innerHTML = txt + "<br>" + serverResponse;
    })
    .catch(error => {
      console.error('Error sending data:', error);
    });
  } 
  document.getElementById("demo").innerHTML = txt; 
}

The save-name.php script stays identical to Method 1—PHP doesn’t care if data comes from a form submit or AJAX.

Key Knowledge to Learn #

To fully grasp this workflow, focus on these core topics:

• Frontend vs. Backend Basics: Understand where JS and PHP run, and how they communicate over HTTP.
• HTTP Request Methods: Learn the difference between GET and POST (we used POST here because it’s more secure for user input).
• PHP Superglobals: Master $_POST and $_GET—these are how PHP accesses data sent from the frontend.
• Form Handling: How HTML forms work, including hidden fields and submission logic.
• AJAX/Fetch API: For asynchronous data transfer (no page reloads), learn to send/receive data with fetch() or older tools like XMLHttpRequest.

内容的提问来源于stack exchange，提问作者Georgio Petr