如何使用 jQuery 提交表单并跳转至其他页面（避免无限循环）-php教程-PHP中文网

如何使用 jQuery 提交表单并跳转至其他页面（避免无限循环）

本文详解如何通过 jquery 正确提交表单并导航到目标页面，重点解决因错误状态管理（如每次重载重置计数器）导致的无限自动提交循环问题，并提供安全、可维护的替代方案。

本文详解如何通过 jquery 正确提交表单并导航到目标页面，重点解决因错误状态管理（如每次重载重置计数器）导致的无限自动提交循环问题，并提供安全、可维护的替代方案。

在实际开发中，常见需求是：用户在模态框中输入订单号 → 点击“查询”按钮 → 自动跳转至 sorgu.php 并携带参数（如 ?key=ABC123）→ 页面加载后自动填充并提交表单，最终展示查询结果。但你当前的实现存在一个关键缺陷：

$count = 0; // ❌ 每次页面加载都重置为 0！
$(document).ready(function(){
    if ($count == 0) {
        $keys = getUrlVars()["key"];
        $('#siparis_keyId').val($keys);
        $("#jsSorgula").submit(); // ⚠️ 触发提交 → 页面刷新 → $count 再次变为 0 → 循环开始
        $count++;
    }
});

由于 $count = 0 是局部变量（且未持久化），每次 sorgu.php 被访问时都会重新执行脚本，$count 始终为 0，导致 $("#jsSorgula").submit() 不断触发，形成无限刷新循环。

✅ 正确做法：分离行为逻辑，杜绝自动触发

1. 避免页面加载时自动提交

删除 sorgu.php 中的自动 submit 逻辑。表单应由用户显式提交，或仅在明确条件（如 URL 含 key 参数且输入框为空）下预填充 + 提示提交，而非静默提交：

$(document).ready(function() {
    const urlParams = new URLSearchParams(window.location.search);
    const key = urlParams.get('key');

    if (key && key.trim()) {
        $('#siparis_keyId').val(key);
        // ✅ 可选：聚焦输入框或显示提示，但不自动提交
        $('#siparis_keyId').focus();
        // ? 更友好的做法：添加「确认查询」按钮或文案提示
        $('.form-group').append(
            `<div class="alert alert-info mt-2 small">已为您填入订单号：<strong>${key}</strong>，点击下方按钮开始查询</div>`
        );
    }
});

2. 使用标准表单提交（推荐）

让

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

自然提交至 sorgu.php（服务端处理），无需 JS 干预提交行为：

<!-- sorgu.php 中保持原 form -->

✅ 优势：语义清晰、SEO 友好、无 JS 依赖、天然防循环。

3. 若必须用 AJAX（无跳转）

如需异步查询且不离开当前页，应在 sorgu.php 中移除

，改用 AJAX 发送请求，并在成功后跳转或渲染结果：

// 替换 sorgu.php 中的 submit 逻辑
$('#jsSorgula').on('submit', function(e) {
    e.preventDefault();
    const key = $('#siparis_keyId').val().trim();
    if (!key) return;

    $.post('api/sorgula.php', { siparis_key: key })
      .done(function(response) {
          // 渲染结果或跳转：window.location.href = 'result.php?key=' + encodeURIComponent(key);
          console.log('查询成功:', response);
      })
      .fail(function() {
          alert('查询失败，请重试');
      });
});

4. 修复 header.php 的链接构造逻辑

当前通过修改的 href 实现跳转，但存在 XSS 风险（未转义用户输入）。应改用 encodeURIComponent：

$("#siparis_Sorgula").click(function(e) {
    e.preventDefault(); // 阻止默认跳转
    const key = $('#siparis_key').val().trim();
    if (!key) return;

    const url = 'sorgu.php?key=' + encodeURIComponent(key);
    window.location.href = url; // ✅ 安全跳转
});