jQuery表单提交问题：修改action后URL参数顺序与预期不符求助

你的表单使用了method="get"，当调用form.submit()时，浏览器会忽略你手动添加到action中的查询参数，自动遍历表单内所有带name属性的元素，按照它们在DOM中的先后顺序生成新的查询字符串，追加到action URL后——这就是参数顺序和你构造的不一致的原因。

方法1：直接跳转构造好的URL（最推荐） #

既然你已经手动生成了符合参数顺序的URL，直接用window.location.href跳转即可，完全绕过浏览器自动拼接参数的逻辑：

// 替换原代码中修改action和submit的部分
window.location.href = actionUrl;

这种方式简单直接，完全由你控制参数顺序，没有额外副作用。

方法2：临时移除表单元素的name属性（适合必须用form.submit()的场景） #

如果一定要通过表单submit提交，需要阻止浏览器自动收集参数。可以临时移除所有带name属性的元素的name值，再提交：

// 构造完actionUrl后执行
$(this).attr('action', actionUrl);

// 临时保存并移除所有元素的name属性
$(this).find('[name]').each(function() {
  $(this).data('origin-name', $(this).attr('name')).removeAttr('name');
});

// 提交表单
$(this).submit();

// 可选：如果后续需要复用这些元素的name，可恢复
// $(this).find('[data-origin-name]').each(function() {
//   $(this).attr('name', $(this).data('origin-name')).removeData('origin-name');
// });

这样浏览器不会生成新的查询参数，只会使用你构造好的action URL。

方法3：调整DOM中表单元素的顺序（无需修改JS） #

如果不想改动JS代码，可以调整HTML内表单元素的顺序，让它们的DOM顺序和你想要的参数顺序一致：

<form class="form" action="test2.php" method="get" autocomplete="off">
    <!-- 1. services 保持最前 -->
    <label class="form__label" for="services">
        <span class="form__icon form__icon--service"><img src="./img/service.svg" alt="pencil"></span>
        <input class="form__input form__input--service" id="services" name="services" type="text" placeholder="What service do you need?" autocomplete="off">
    </label>
    <!-- 2. 按顺序放置hidden元素 -->
    <input id="service_type" name="service_type" type="hidden" value="0" autocomplete="off">
    <input id="category" name="category" type="hidden" value="0" autocomplete="off">
    <!-- 3. location 放在最后 -->
    <label class="form__label form__label--location" for="location">
        <span class="form__icon form--icon--location"><img src="./img/location.svg" alt="location"></span>
        <input class="form__input form__input--location" id="location" name="location" type="number" placeholder="Location" pattern="[0-9]*" inputmode="numeric" autocomplete="off">
    </label>
    <button class="form__btn" type="submit">
        Search
    </button>
</form>

这样浏览器自动生成的参数顺序就会和你预期的一致。

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