非LiveView Phoenix项目：.heex文件中获取标签值并传参

方案一：用HTML表单提交（Phoenix原生推荐） #

这种方式利用HTML表单的GET提交特性，自动将参数拼接到URL上，同时后端可以轻松获取参数赋值给@limit。

修改后的模板代码 #

<div class="container mx-auto p-4">
  <div class="mb-4">
    <!-- 用表单包裹select和按钮 -->
    <form action="<%= Routes.banner_path(@conn, :index) %>" method="get" class="inline-flex items-center">
      <!-- Limite de banners -->
      <label for="limit" class="text-gray-700 ml-4">Limite de banners</label>
      <select id="limit" name="limit" class="ml-2 p-2 border rounded appearance-none pr-8">
        <!-- 根据@limit设置默认选中项 -->
        <option value="5" <%= if @limit == "5", do: "selected" %>>5</option>
        <option value="10" <%= if @limit == "10", do: "selected" %>>10</option>
        <option value="20" <%= if @limit == "20", do: "selected" %>>20</option>
      </select>
      
      <!-- Botão de busca -->
      <button type="submit" id="search" class="ml-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Buscar
      </button>
    </form>
  </div>
</div>

后端控制器处理 #

在对应的控制器动作（比如BannerController的index）中，获取URL参数并赋值给@limit：

def index(conn, params) do
  # 默认值设为5，避免参数为空的情况
  limit = params["limit"] || "5"
  # 这里可以添加你的业务逻辑，比如根据limit查询数据
  # banners = Banner.list_banners(limit: String.to_integer(limit))
  
  # 将limit传递给模板，用于设置select的默认选中项
  render(conn, "index.html", limit: limit)
end

方案二：纯JavaScript监听点击跳转 #

如果不想用表单，也可以用JS手动监听按钮点击事件，构建带参数的URL并跳转。

模板代码（保留原结构，仅添加JS） #

<div class="container mx-auto p-4">
  <div class="mb-4">
    <!-- Limite de banners -->
    <label for="limit" class="text-gray-700 ml-4">Limite de banners</label>
    <select id="limit" name="limit" class="ml-2 p-2 border rounded appearance-none pr-8">
      <option value="5" <%= if @limit == "5", do: "selected" %>>5</option>
      <option value="10" <%= if @limit == "10", do: "selected" %>>10</option>
      <option value="20" <%= if @limit == "20", do: "selected" %>>20</option>
    </select>
    
    <!-- Botão de busca -->
    <button id="search" class="ml-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Buscar
    </button>
  </div>
</div>

<!-- 在模板末尾添加JS脚本 -->
<script>
document.getElementById('search').addEventListener('click', function() {
  const limitValue = document.getElementById('limit').value;
  // 替换成你的实际路由路径，比如Phoenix生成的路径
  const baseUrl = "<%= Routes.banner_path(@conn, :index) %>";
  // 构建带参数的URL
  const newUrl = `${baseUrl}?limit=${encodeURIComponent(limitValue)}`;
  // 跳转页面
  window.location.href = newUrl;
});
</script>

后端控制器处理 #

和方案一完全一致，通过params["limit"]获取值并赋值给@limit即可。

内容的提问来源于stack exchange，提问作者Arthur Ramón Souza