列表场景下使用a标签发起POST请求传递参数遇会话问题求解决方案

花费5小时尝试了所有方案仍未找到解决办法，本人对HTML和Javascript并不精通，但已做了诸多尝试。

• 有一组从数据库获取的服务列表，每项服务都对应唯一ID，目前通过URL传递该ID的方式不符合预期
• 每个列表元素内包含一张图片、一个按钮以及一个带用户名的链接
• 曾尝试用Javascript获取href中的值并通过POST发送到目标地址，功能本身可正常运行，但服务器会将该请求识别为不同会话，导致页面无法展示完整的可编辑列表内容
• 列表每一行的name属性相同，无法正确提取到对应行的参数值

原有代码示例 #

发送POST请求的JS代码 #

function myFunction(test) {
    var url = "/portal/vendorlistingsadd";
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url);
    
    xhr.setRequestHeader("Accept", "application/x-www-form-urlencoded");
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    xhr.onreadystatechange = function () {
       if (xhr.readyState === 4) {
          console.log(xhr.status);
          console.log(xhr.responseText);
       }};
    xhr.send(test);
}

绑定点击事件的a标签代码 #

<a href="#" onclick=myFunction('${serviclist.listing_id}')><img src=${serviclist.picture} alt="" class="img-fluid"></a></div>

后续尝试的表单代码 #

<form action="/portal/vendorlistingsadd/editlisting" method="post">
</form>
<button class= "btn-lg" name ='${serviclist.listing_id}'  type = "submit">  <img src="${serviclist.picture}"/> </button>

方案1：修复现有XHR请求的会话问题 #

之前的XHR请求默认不会携带站点cookie，所以服务器会识别为新会话，只需补充2处修改即可：

1. 在xhr.open代码行后新增xhr.withCredentials = true;，开启跨请求cookie携带
2. 调整send参数格式，符合表单传输规范：xhr.send("listing_id="+test);，后端直接取listing_id参数即可
   如果提交后需要跳转展示新页面，可在xhr请求成功的回调中补充window.location.href = '目标页面地址'实现跳转。

方案2：纯表单实现（无需JS，稳定性更高） #

之前的表单写法把按钮放在了form标签外，且用动态ID作为name属性会导致后端取值困难，调整为每个列表项对应独立表单即可：

<!-- 每个服务列表项对应一个独立表单，天然隔离参数 -->
<form action="/portal/vendorlistingsadd/editlisting" method="post">
    <!-- 隐藏域存储当前行对应的服务ID -->
    <input type="hidden" name="listing_id" value="${serviclist.listing_id}">
    <button class="btn-lg" type="submit">
        <img src="${serviclist.picture}" alt="服务图片"/>
    </button>
</form>

该方案不需要额外编写JS，点击对应行的按钮会自动携带当前会话cookie提交参数，不会出现会话识别错误、同名参数冲突的问题，提交后浏览器会自动跳转加载返回的可编辑列表页面，完全匹配你的需求。

内容的提问来源于stack exchange，提问作者Peter Latham Lewis