如何实现无刷新在textarea中输入并传递参数？附代码示例

问题1：如何在不刷新页面的情况下在textarea中输入内容？ #

原生<textarea>控件默认支持不刷新页面直接输入内容。如果需要通过JavaScript动态向textarea插入/修改内容，直接操作其value属性即可，示例如下：

<textarea id="myTextarea" rows="5" cols="30"></textarea>
<button onclick="addContent()">追加内容</button>

<script>
function addContent() {
  const textarea = document.getElementById('myTextarea');
  // 向textarea追加内容
  textarea.value += '动态插入的内容\n';
}
</script>

问题2：如何在textarea输入时不刷新页面传递参数？ #

要实现不刷新页面将textarea中的参数传递到后端PHP，需使用异步请求（AJAX），推荐使用现代的fetch API。通过异步请求将参数发送到PHP接口，后端处理后返回结果，前端再更新页面内容。

完整实现代码 #

前端代码（HTML+JS）

<textarea id="inputText" rows="5" cols="30" placeholder="输入内容后提交"></textarea>
<button onclick="sendToBackend()">提交到后端</button>
<div id="responseBox">处理结果将显示在这里</div>

<script>
const textarea = document.getElementById('inputText');
const responseBox = document.getElementById('responseBox');

function sendToBackend() {
  const inputValue = textarea.value;
  if (!inputValue.trim()) {
    responseBox.innerHTML = '请输入内容';
    return;
  }

  // 发送异步请求到PHP文件
  fetch('process.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    // 编码参数避免特殊字符问题
    body: `params=${encodeURIComponent(inputValue)}`
  })
  .then(res => res.text())
  .then(data => {
    responseBox.innerHTML = `后端处理结果：${data}`;
  })
  .catch(err => {
    responseBox.innerHTML = `请求失败：${err.message}`;
  });
}
</script>

后端PHP代码（process.php）

<?php
// 假设$ArNumbers是已初始化的实例对象
$params = $_POST['params'] ?? '';
if ($params) {
    // 调用指定方法处理参数
    $result = $ArNumbers->int2str($params);
    echo $result;
} else {
    echo '未接收到有效参数';
}
?>

补充：类似转换功能的textarea示例 #

基于你提供的转换功能代码，调整为textarea版本：

<textarea id="textbox" placeholder="输入数值"></textarea>
<button onclick="convertToCm()">转换为厘米</button>
<div id="result">结果</div>

<script>
let textbox = document.getElementById("textbox");
let result = document.getElementById("result");
function convertToCm() {
  const value = textbox.value;
  // 若需后端处理，可在此处加入上述fetch请求逻辑
  result.innerHTML = `${value} 厘米`;
}
</script>

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