如何通过类confirm对话框获取用户输入并发送至PHP后端？

下面给你两种不用新增输入框，就能把prompt()获取的内容发送到PHP后端的方法：

方法一：用AJAX直接发送输入内容 #

给按钮绑定点击事件，先通过prompt()拿到用户输入，验证有效后用AJAX请求把数据发给后端。代码示例：

<button onclick="sendUserInput()">点击输入内容</button>

<script>
function sendUserInput() {
  const input = prompt("请输入你的名字：", "Harry Potter");
  // 校验输入不为空且不是取消操作
  if (input !== null && input.trim() !== "") {
    // 用fetch发送POST请求
    fetch('backend.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      // 编码输入内容避免乱码
      body: `user_input=${encodeURIComponent(input)}`
    })
    .then(res => res.text())
    .then(result => {
      console.log('提交成功：', result);
      alert('输入已提交！');
    })
    .catch(err => {
      console.error('提交出错：', err);
      alert('提交失败，请重试');
    });
  } else {
    alert('请输入有效的内容');
  }
}
</script>

对应的PHP后端代码（backend.php）：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $userInput = isset($_POST['user_input']) ? trim($_POST['user_input']) : '';
  if (!empty($userInput)) {
    // 这里写你的业务逻辑，比如存入数据库、处理数据
    echo "成功收到输入：" . htmlspecialchars($userInput);
  } else {
    echo "输入内容为空";
  }
}
?>

方法二：如果按钮属于表单，动态添加参数后提交 #

要是这个按钮原本是某个表单的提交按钮，可以在点击时先获取输入，然后动态创建一个隐藏的input元素加到表单里，再提交表单。代码示例：

<form id="targetForm" action="backend.php" method="POST">
  <!-- 表单原有元素 -->
  <button type="submit" onclick="handleFormSubmit(event)">提交</button>
</form>

<script>
function handleFormSubmit(event) {
  // 先阻止表单默认提交行为
  event.preventDefault();
  
  const input = prompt("请输入你的名字：", "Harry Potter");
  if (input !== null && input.trim() !== "") {
    const form = document.getElementById('targetForm');
    // 创建隐藏input，把输入值传进去
    const hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    hiddenInput.name = 'user_input';
    hiddenInput.value = input;
    
    form.appendChild(hiddenInput);
    // 提交表单
    form.submit();
  } else {
    alert('请输入有效的内容');
  }
}
</script>

后端处理和方法一完全一样，直接通过$_POST['user_input']就能拿到用户输入的内容。

内容的提问来源于stack exchange，提问作者Kemal Özvarol