页面加载时仅触发一次表单提交的解决方案求助

我碰到了一个棘手的问题，先跟大家说下具体场景：

页面上有个配送方式选择的表单，代码如下：

<form id="shipping" action="some-action-url" method="post"> 
  <ul> 
    <li> 
      <input id="ship238280" name="method" value="238280|479435" type="radio" checked="checked"> 
      <label for="ship238280">Transport (€0,00)</label> 
    </li> 
    <li> 
      <input id="ship292259" name="method" value="292259|580109" type="radio"> 
      <label for="ship292259">Pick up (€0,00)</label> 
    </li> 
  </ul> 
</form>

我用的是SaaS平台，脚本访问权限有限。这个表单默认选中第一个选项，但必须提交表单才能让系统确认这个配送选项。我写了表单提交的函数：

function sendform(){ 
  var loader = $('.cart-loader'); 
  var form = $('#shipping'); 
  $(loader).show() 
  $.ajax({ 
    type: "POST", 
    url: $(form).attr('action'), 
    data: $(form).serialize(), 
    success: function(data) { 
      $(loader).hide() 
      //$(this).unbind() 
    } 
  }); 
}

同时给单选按钮绑定了点击提交事件：

$('#shipping input').on('click', function(){ 
  sendform() 
});

本来想实现页面加载时自动提交表单，于是写了这段代码：

$(function(){ 
  $('#shipping input').each(function(){ 
    if($(this).is(':checked')){ 
      $(this).trigger('click') // or sendform() 
    } 
  }); 
});

结果悲剧了——表单开始持续重复提交！原因是每次提交后页面会重载，重载后这段代码又会触发提交，陷入死循环。我试过$(document).one('ready', function(){...})，也在ajax成功回调里加过$(this).unbind()，但都没用，求各位支招！

我的解决方案（适配SaaS权限有限场景） #

核心思路是用本地存储标记提交状态，因为页面重载后本地存储的内容不会丢失，这样就能判断要不要再次触发提交：

1. 修改页面加载时的触发逻辑，用localStorage（或sessionStorage）标记是否已经完成首次提交：

$(function(){
  // 检查本地存储中是否有提交标记
  var hasSubmitted = localStorage.getItem('shippingFormSubmitted');
  if (!hasSubmitted) {
    // 标记为已提交，避免重复触发
    localStorage.setItem('shippingFormSubmitted', 'true');
    // 直接调用提交函数，不用触发单选按钮点击（减少不必要的事件触发）
    sendform();
  }
});

2. 处理用户手动切换配送方式的情况——如果用户手动选了其他选项，需要清除标记，确保下次刷新时能提交新的选项：

$('#shipping input').on('click', function(){
  // 用户手动切换选项，清除提交标记
  localStorage.removeItem('shippingFormSubmitted');
  sendform();
});

补充说明 #

• 如果希望仅在当前会话生效（关闭浏览器就清除标记），把localStorage换成sessionStorage即可，逻辑完全一样。
• 之前的方法无效的原因：$(document).one('ready')其实没用，因为页面重载后整个脚本会重新执行，one绑定的事件又会被重新绑定；而ajax回调里的unbind是解绑ajax的事件处理，和页面加载时的触发逻辑完全无关，所以解决不了循环问题。

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