如何在Laravel Blade的a标签中传递JavaScript变量

云上老周

2026-8-2

解决方法：将JavaScript变量传入Laravel Blade锚点标签的href中

核心逻辑：Blade模板是服务器端渲染，JavaScript是客户端执行，服务器解析Blade语法时JS变量还未生成，因此无法直接在{{ }}中引用JS变量，必须通过客户端JS动态修改DOM元素属性。

方案1：通过ID定位a标签，动态修改href

给a标签添加唯一ID，方便JS定位：

<a id="rpr-send-link" href="{{ url('rpr/') }}">
  <button>send</button>
</a>

在Ajax请求的成功回调中，拼接基础URL与JS变量，更新href属性：

// Ajax请求示例
$.ajax({
  url: '/your-controller-api',
  method: 'GET',
  success: function(response) {
    var rpr_data_id = response.id;
    // 原生JS写法
    const linkEl = document.getElementById('rpr-send-link');
    linkEl.href = "{{ url('rpr/') }}" + rpr_data_id;
    
    // 若使用jQuery，可替换为：
    // $('#rpr-send-link').attr('href', "{{ url('rpr/') }}" + rpr_data_id);
  }
});

方案2：预存基础URL到JS变量，再构造完整链接

先通过Blade生成基础URL并存入JS变量，后续直接拼接ID使用：

<a id="rpr-send-link" href="#">
  <button>send</button>
</a>

<script>
// 预存Blade渲染后的基础URL
const baseRprUrl = "{{ url('rpr/') }}";

// Ajax回调中构造完整链接
$.ajax({
  url: '/your-controller-api',
  success: function(response) {
    var rpr_data_id = response.id;
    const fullUrl = baseRprUrl + rpr_data_id;
    document.getElementById('rpr-send-link').href = fullUrl;
  }
});
</script>