如何在不跳转页面的情况下提交HTTP GET请求控制Yealink话机拨号

你当前用<a>标签的href触发GET请求会导致页面跳转，要实现后台静默请求，推荐以下几种方法：

方法1：使用JavaScript Fetch API（推荐） #

直接在前端用Fetch发送异步GET请求，不会刷新或跳转页面。修改你的HTML和JS代码：

<form method="POST">
  <input type="text" name="Tel1" value="<?php echo $datacus['Tel1'] ?>" placeholder="Telephone 1">
  <!-- 替换a标签为普通按钮，绑定点击事件 -->
  <button type="button" onclick="initiateCall('<?php echo $phoneip; ?>', '<?php echo $datacus['Tel1']; ?>')">Call</button>
</form>

<script>
function initiateCall(phoneIp, phoneNumber) {
  // 拼接话机请求URL
  const url = `http://user:password@${phoneIp}/servlet?key=number=${phoneNumber}&outgoing_uri=1`;
  
  // 发送异步请求，忽略响应结果
  fetch(url, { method: 'GET' })
    .catch(error => {
      // 可选：控制台打印错误用于排查
      console.error('拨号请求失败:', error);
    });
}
</script>

注意：如果浏览器报跨域错误，说明CRM页面域名和话机IP不在同一域，需改用后端代理方案（见方法3）。

方法2：使用XMLHttpRequest（兼容旧浏览器） #

若需兼容较老浏览器，可改用XMLHttpRequest实现：

<button type="button" onclick="initiateCall('<?php echo $phoneip; ?>', '<?php echo $datacus['Tel1']; ?>')">Call</button>

<script>
function initiateCall(phoneIp, phoneNumber) {
  const url = `http://user:password@${phoneIp}/servlet?key=number=${phoneNumber}&outgoing_uri=1`;
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.send();
}
</script>

方法3：通过PHP后端代理（解决跨域+隐藏敏感信息） #

如果前端直接访问话机IP出现跨域限制，或者不想在前端暴露话机的账号密码，建议通过PHP后端转发请求：

1. 创建PHP代理脚本（比如dial.php） #

<?php
// 获取前端传递的参数
$phoneIp = $_GET['phoneip'];
$phoneNumber = $_GET['number'];

// 拼接话机请求URL
$url = "http://user:password@{$phoneIp}/servlet?key=number={$phoneNumber}&outgoing_uri=1";

// 发送GET请求
$context = stream_context_create([
    'http' => [
        'method' => 'GET',
        'timeout' => 5 // 设置超时时间，避免请求挂起
    ]
]);
file_get_contents($url, false, $context);

// 返回空响应即可
exit();
?>

2. 前端调用代理脚本 #

<button type="button" onclick="initiateCall('<?php echo $phoneip; ?>', '<?php echo $datacus['Tel1']; ?>')">Call</button>

<script>
function initiateCall(phoneIp, phoneNumber) {
  // 调用自己的PHP代理脚本，编码参数避免乱码
  fetch(`dial.php?phoneip=${encodeURIComponent(phoneIp)}&number=${encodeURIComponent(phoneNumber)}`)
    .catch(error => console.error('拨号请求失败:', error));
}
</script>

这个方法既能解决跨域问题，还能隐藏话机的账号密码，提升安全性。

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