如何用JS调用对接Bitly API的PHP脚本实现短链接生成？

嘿，我来帮你搞定这个Bitly短链接生成的功能！结合你描述的流程，我把完整的代码片段整理好了，包括前端JS的URL编码处理和后端PHP的API对接逻辑，完全满足你不暴露密钥的需求。

1. 前端HTML/JS 完整代码（shortcode.html） #

我补全了你未写完的getURL函数，重点处理了URL编码和AJAX请求逻辑，确保用户输入的URL能安全传递到后端：

<!DOCTYPE html>
<html>
<head>
    <title>Bitly短链接生成器</title>
</head>
<body>
    <input type="text" id="urlInput" placeholder="输入要缩短的URL..." onkeyup="getURL(this.value)">
    <div id="shortLinkResult" style="margin-top:10px;"></div>

    <script>
        // 防抖定时器，避免频繁发送请求
        let debounceTimer;
        
        function getURL(str) {
            // 清空之前的定时器
            clearTimeout(debounceTimer);
            // 输入为空时清空结果
            if (!str.trim()) {
                document.getElementById('shortLinkResult').innerHTML = '';
                return;
            }

            debounceTimer = setTimeout(() => {
                // 对用户输入的URL进行编码，解决特殊字符（如&、?）导致的请求异常
                const encodedURL = encodeURIComponent(str);
                
                // 创建AJAX请求
                const xhr = new XMLHttpRequest();
                xhr.open('POST', 'bitly-shortener.php', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                
                xhr.onload = function() {
                    if (this.status === 200) {
                        const response = JSON.parse(this.responseText);
                        if (response.success) {
                            // 展示可点击的短链接
                            document.getElementById('shortLinkResult').innerHTML = 
                                `生成的短链接：<a href="${response.short_url}" target="_blank">${response.short_url}</a>`;
                        } else {
                            document.getElementById('shortLinkResult').innerHTML = 
                                `<span style="color:red;">错误：${response.error_message}</span>`;
                        }
                    } else {
                        document.getElementById('shortLinkResult').innerHTML = '<span style="color:red;">请求失败，请稍后重试</span>';
                    }
                };

                // 发送编码后的URL参数到后端
                xhr.send(`url=${encodedURL}`);
            }, 1000); // 用户停止输入1秒后再发送请求
        }
    </script>
</body>
</html>

前端关键说明： #

• 使用encodeURIComponent()对用户输入的URL编码：这一步必须做，否则URL中的特殊字符（比如&、?）会破坏请求参数结构，导致后端无法正确接收。
• 加入防抖逻辑：避免用户每输入一个字符就发送一次请求，减少服务器和Bitly API的压力。

2. 后端PHP代码（bitly-shortener.php） #

这里提供两种实现方式（优先推荐Curl版本，兼容性和稳定性更好），密钥完全保存在后端，前端不会接触到：

方式一：Curl版本（推荐） #

<?php
// 你的Bitly API令牌（从Bitly后台获取，不要暴露给前端）
$BITLY_TOKEN = '你的Bitly Access Token';
$BITLY_API_URL = 'https://api-ssl.bitly.com/v4/shorten';

// 获取前端传递的编码后的URL并解码
$originalUrl = isset($_POST['url']) ? urldecode($_POST['url']) : '';

// 先验证输入的URL是否有效
if (empty($originalUrl) || !filter_var($originalUrl, FILTER_VALIDATE_URL)) {
    echo json_encode([
        'success' => false,
        'error_message' => '请输入有效的URL地址'
    ]);
    exit;
}

// 准备Bitly API要求的JSON参数
$postData = json_encode([
    'long_url' => $originalUrl
]);

// 初始化Curl请求
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $BITLY_API_URL);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

// 设置请求头：包含认证令牌和JSON格式声明
$headers = [
    'Authorization: Bearer ' . $BITLY_TOKEN,
    'Content-Type: application/json'
];
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

// 执行请求并获取响应
$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

// 处理API响应
if ($httpCode === 200) {
    $data = json_decode($response, true);
    echo json_encode([
        'success' => true,
        'short_url' => $data['link']
    ]);
} else {
    $errorData = json_decode($response, true);
    $errorMsg = isset($errorData['description']) ? $errorData['description'] : 'Bitly API请求失败';
    echo json_encode([
        'success' => false,
        'error_message' => $errorMsg
    ]);
}
?>

方式二：file_get_contents版本（适合禁用Curl的服务器） #

<?php
$BITLY_TOKEN = '你的Bitly Access Token';
$BITLY_API_URL = 'https://api-ssl.bitly.com/v4/shorten';

$originalUrl = isset($_POST['url']) ? urldecode($_POST['url']) : '';

if (empty($originalUrl) || !filter_var($originalUrl, FILTER_VALIDATE_URL)) {
    echo json_encode([
        'success' => false,
        'error_message' => '请输入有效的URL地址'
    ]);
    exit;
}

$postData = json_encode([
    'long_url' => $originalUrl
]);

// 配置请求选项
$options = [
    'http' => [
        'header'  => [
            'Authorization: Bearer ' . $BITLY_TOKEN,
            'Content-Type: application/json'
        ],
        'method'  => 'POST',
        'content' => $postData,
    ],
];
$context  = stream_context_create($options);
$response = file_get_contents($BITLY_API_URL, false, $context);

// 解析HTTP状态码
preg_match('/HTTP\/\d+\.\d+ (\d+)/', $http_response_header[0], $matches);
$statusCode = isset($matches[1]) ? (int)$matches[1] : 500;

// 返回结果给前端
if ($statusCode === 200) {
    $data = json_decode($response, true);
    echo json_encode([
        'success' => true,
        'short_url' => $data['link']
    ]);
} else {
    $errorData = json_decode($response, true);
    $errorMsg = isset($errorData['description']) ? $errorData['description'] : 'API请求失败';
    echo json_encode([
        'success' => false,
        'error_message' => $errorMsg
    ]);
}
?>

后端关键说明： #

• 密钥安全：Bitly的Access Token只在PHP文件中使用，前端无法获取，完全符合你的需求。
• URL验证：先通过filter_var验证用户输入的URL有效性，避免无效请求发送到Bitly API。
• JSON格式交互：Bitly v4 API要求用JSON格式传递参数，所以我们把请求体编码为JSON，并设置对应的请求头。

3. 额外注意事项 #

1. 获取Bitly Access Token：登录Bitly账号，进入「Settings → API → Generate Token」生成你的专属令牌。
2. 服务器环境：确保你的服务器支持Curl（大部分主机默认支持），如果不支持再使用file_get_contents版本。
3. 错误处理：代码中已经包含了基础的错误处理逻辑，你可以根据需求进一步扩展（比如添加请求超时处理）。

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