ASP.NET MVC中如何用同一按钮提交表单并发起Ajax请求？

首先，咱们先梳理下你遇到的核心问题：用submit按钮会刷新页面导致输入框清空，Ajax拿不到有效数据；用button按钮又触发不了表单提交到Index方法。核心矛盾是页面刷新会打断前端状态，所以最优解是避免页面刷新，用Ajax提交表单，同时保留输入框内容，再启动定时请求。

第一步：修正后端GetData方法的错误 #

先看你这段代码里的逻辑问题：

var fetchData = db.Scraps.Where(s => s.Url == scrap.Url && s.Keyword == s.Keyword).Max(s => (int?)s.Id) ?? 0;

这里的s.Keyword == s.Keyword是恒成立的无效条件，应该改成s.Keyword == scrap.Keyword，不然查询逻辑完全错误，修正后：

public JsonResult GetData(ScrapJob scrap) {
    var fetchData = db.Scraps.Where(s => s.Url == scrap.Url && s.Keyword == scrap.Keyword).Max(s => (int?)s.Id) ?? 0;
    var findData = db.Scraps.Find(fetchData);
    return Json(findData, JsonRequestBehavior.AllowGet);
}

第二步：前端改造（推荐方案，无页面刷新） #

我们用Ajax提交表单替代默认的表单提交，这样页面不会刷新，输入框内容保留，同时能触发Index方法。然后在表单提交成功后，启动定时Ajax请求GetData。

修改后的前端脚本：

$(function () {
    var timeoutFunction;
    
    $("#btnStart").click(function () {
        // 点击按钮时才获取最新的表单数据（不要在页面加载时提前序列化，那时输入框是空的）
        var scrapForm = $("#scrapForm").serialize();
        
        // 1. 先Ajax提交表单到Home/Index
        $.ajax({
            type: "POST",
            url: "/Home/Index",
            data: scrapForm,
            success: function () {
                console.log("表单数据已提交到Index方法");
                
                // 2. 清除之前的定时器（防止重复点击导致多个定时器同时运行）
                if (timeoutFunction) {
                    clearInterval(timeoutFunction);
                }
                
                // 3. 启动定时请求GetData（建议改成和Quartz一致的20000毫秒，减少无效请求）
                timeoutFunction = setInterval(function () {
                    $.ajax({
                        type: "GET",
                        url: "/Home/GetData",
                        data: scrapForm,
                        success: function (data) {
                            // 确保返回数据有效再添加到表格
                            if (data) {
                                var row = `<tr>
                                    <td>${data.Url}</td>
                                    <td>${data.DateTime}</td>
                                    <td>${data.Keyword}</td>
                                    <td>${data.Count}</td>
                                </tr>`;
                                $("#scrapTable tbody").append(row);
                            }
                        },
                        error: function () {
                            console.log("获取最新数据失败");
                        }
                    });
                }, 20000);
            },
            error: function () {
                console.log("表单提交失败，请检查后端Index方法");
            }
        });
    });
});

表单按钮保持type="button"（因为我们用Ajax手动提交，不需要默认的submit行为）：

<button type="button" id="btnStart" class="btn btn-success">Start</button>

备选方案（允许页面刷新） #

如果你的Index方法必须触发页面跳转或刷新，那可以在表单提交前把数据存在本地存储，页面刷新后再读取并启动定时器：

$(function () {
    var timeoutFunction;
    
    // 页面加载时检查是否有保存的表单数据
    var savedFormData = localStorage.getItem("scrapJobData");
    if (savedFormData) {
        startDataFetch(savedFormData);
    }
    
    $("#btnStart").click(function () {
        var scrapForm = $("#scrapForm").serialize();
        // 保存数据到localStorage
        localStorage.setItem("scrapJobData", scrapForm);
        // 手动提交表单（会刷新页面）
        $("#scrapForm").submit();
    });
    
    function startDataFetch(formData) {
        if (timeoutFunction) clearInterval(timeoutFunction);
        timeoutFunction = setInterval(function () {
            $.ajax({
                type: "GET",
                url: "/Home/GetData",
                data: formData,
                success: function (data) {
                    if (data) {
                        var row = `<tr>
                            <td>${data.Url}</td>
                            <td>${data.DateTime}</td>
                            <td>${data.Keyword}</td>
                            <td>${data.Count}</td>
                        </tr>`;
                        $("#scrapTable tbody").append(row);
                    }
                }
            });
        }, 20000); // 和Quartz调度间隔一致
    }
});

此时按钮要改成type="submit"：

<button type="submit" id="btnStart" class="btn btn-success">Start</button>

额外注意事项 #

1. 确保你的Home/Index方法支持POST请求，能正确接收ScrapJob参数。
2. 定时请求的间隔建议和Quartz的20秒保持一致，避免频繁请求给服务器造成压力。
3. 可以添加“Stop”按钮来清除定时器，提升用户体验。

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