如何在CodeIgniter中让TinyURL显示在表单下方同一页面？

要实现短链接在原页面表单下方展示，核心是用AJAX异步提交请求避免页面跳转，再把返回结果插入到页面指定位置。以下是具体修改步骤：

一、修改前端视图（url.php） #

调整表单结构，添加结果展示容器，编写AJAX提交逻辑：

<form class="actionForm" id="urlForm">
    <div class="form-group">
        <label for="title"><?php _e('Url') ?></label>
        <input type="text" class="form-control" id="original_url" name="original_url">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
<!-- 新增短链接结果展示容器，默认隐藏 -->
<div id="tinyUrlResult" class="mt-3" style="display:none;">
    <strong>生成的短链接：</strong>
    <a href="" id="tinyLink" target="_blank"></a>
</div>

<script>
// 监听表单提交事件
document.getElementById('urlForm').addEventListener('submit', function(e) {
    // 阻止表单默认跳转行为
    e.preventDefault();
    
    const originalUrl = document.getElementById('original_url').value.trim();
    const resultContainer = document.getElementById('tinyUrlResult');
    const tinyLink = document.getElementById('tinyLink');
    
    // 清空之前的结果
    resultContainer.style.display = 'none';
    tinyLink.href = '';
    
    // 校验输入
    if (!originalUrl) {
        alert('请输入要缩短的URL');
        return;
    }
    
    // 发送AJAX请求到后端接口
    fetch('<?= site_url('get_tiny_url') ?>?original_url=' + encodeURIComponent(originalUrl))
        .then(response => response.text())
        .then(data => {
            if (data) {
                // 成功获取短链接，显示结果
                tinyLink.href = data;
                tinyLink.textContent = data;
                resultContainer.style.display = 'block';
            } else {
                alert('生成短链接失败，请重试');
            }
        })
        .catch(() => {
            alert('请求出错，请检查网络或重试');
        });
});
</script>

二、优化后端控制器方法 #

修复原代码中的函数嵌套问题，修正TinyURL API地址（原代码中的tinyurlApi是占位符，需替换为真实API地址）：

public function get_tiny_url()
{
    $original_url = $this->input->get('original_url');
    
    // 校验输入
    if (empty($original_url)) {
        echo '';
        return;
    }
    
    // 正确的TinyURL API地址，注意对原URL进行编码
    $api_url = 'https://tinyurl.com/api-create.php?url=' . urlencode($original_url);
    
    $curl = curl_init();
    $timeout = 10;

    curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, $timeout);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_URL, $api_url);

    $new_url = curl_exec($curl);
    curl_close($curl);

    // 直接返回生成的短链接字符串
    echo $new_url;
}

三、额外注意事项 #

1. 确保CodeIgniter的url helper已加载，可在控制器构造函数中添加：

   public function __construct()
   {
       parent::__construct();
       $this->load->helper('url');
   }
   

2. 如果需要更严谨的错误处理，可让后端返回JSON格式响应，前端根据状态码处理结果，示例如下：
   后端修改：

   public function get_tiny_url()
   {
       $response = ['success' => false, 'url' => ''];
       $original_url = $this->input->get('original_url');
       
       if (!empty($original_url)) {
           $api_url = 'https://tinyurl.com/api-create.php?url=' . urlencode($original_url);
           $curl = curl_init();
           curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 10);
           curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
           curl_setopt($curl, CURLOPT_URL, $api_url);
           $new_url = curl_exec($curl);
           curl_close($curl);
           
           if ($new_url) {
               $response['success'] = true;
               $response['url'] = $new_url;
           }
       }
       
       header('Content-Type: application/json');
       echo json_encode($response);
   }
   

   前端对应修改AJAX处理逻辑：

   fetch('<?= site_url('get_tiny_url') ?>?original_url=' + encodeURIComponent(originalUrl))
       .then(response => response.json())
       .then(data => {
           if (data.success) {
               tinyLink.href = data.url;
               tinyLink.textContent = data.url;
               resultContainer.style.display = 'block';
           } else {
               alert('生成短链接失败，请重试');
           }
       })
   

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