页面加载时基于localStorage内容自动提交AJAX表单失败问题

云上老周

2026-8-17

问题解决：页面加载时自动提交AJAX表单失败

问题原因分析

你当前的代码存在两个关键错误：

a.preventDefault();无效且多余：当前上下文没有定义变量a，且页面加载阶段不存在需要阻止的默认行为，这行代码会直接报错。
FormData构建错误：new FormData(this)中的this在document.ready回调里指向的是document对象，而非表单元素，导致无法正确获取表单数据，AJAX请求没有携带search-bar参数。

解决方案

方案一：修复现有AJAX代码，正确获取表单数据

直接修正FormData的构建逻辑，确保获取到正确的表单元素：

$(document).ready(function() {
    const searchTag = localStorage.searchTag;
    // 避免无搜索标签时执行无效请求
    if (!searchTag) return;

    $("#search-bar").val(searchTag);

    // 获取表单DOM元素，用于构建FormData
    const formElement = $("#search-form")[0];
    $.ajax({
        type: "post",
        url: 'Php/display-list.php',
        data: new FormData(formElement),
        processData: false,
        contentType: false,
        success: function(response) {
            $(".recipe-list").html(response);
        }
    });

    localStorage.searchTag = "";
});

方案二：复用已有`input`事件逻辑（推荐）

你已经为表单写了input事件的AJAX处理函数，直接触发该事件即可，无需重复编写AJAX代码，减少冗余：

$(document).ready(function() {
    const searchTag = localStorage.searchTag;
    if (!searchTag) return;

    // 填入值后触发input事件，自动执行已有的AJAX提交逻辑
    $("#search-bar").val(searchTag).trigger('input');

    localStorage.searchTag = "";
});