Ajax提交数据至Controller后如何返回View页面？

我来帮你排查这段代码里的问题，并且给出正确的实现方案：

首先，你的AJAX脚本里存在几个关键问题，我们逐个修正：

1. 按钮选择器错误 #

你写的 $("Submit") 无法正确选中提交按钮，jQuery选择器需要根据元素的ID、类或者类型来定位。如果按钮的ID是Submit，应该写成 $("#Submit")；如果是submit类型的按钮，也可以用 $("input[type='submit']") 来选中。

2. 表单序列化的对象错误 #

$(this).serialize() 里的this指向的是点击的按钮，而不是表单本身！这样根本获取不到表单里的输入数据。你需要选中整个表单，然后调用serialize()，比如 $("#你的表单ID").serialize()。

3. AJAX回调函数写法错误 #

你写的 done: ... 不符合jQuery AJAX的语法规范：如果是在配置对象里定义成功回调，应该用 success: function(response) {...}；如果用链式调用，则是 .done(function(response) {...})。

修正后的完整示例 #

View端代码（含表单和脚本） #

<form id="paymentForm" method="post">
    @Html.AntiForgeryToken() <!-- ASP.NET MVC防伪令牌，必须包含 -->
    <!-- 示例表单字段，根据你的实际需求修改 -->
    <div>
        <label>支付金额：</label>
        <input type="number" name="Amount" required />
    </div>
    <button type="submit" id="Submit">确认支付</button>
</form>

<script type="text/javascript">
$(document).ready(function () {
    $("#Submit").click(function (e) {
        e.preventDefault(); // 阻止表单默认提交行为，改用AJAX提交

        var $form = $("#paymentForm");
        var formData = $form.serialize(); // 序列化整个表单，自动包含防伪令牌

        $.ajax({
            url: "/Process/Payment", // 使用绝对路径避免相对路径问题
            method: "POST",
            data: formData,
            success: function(feedback) {
                // 处理Controller返回的反馈信息
                if (feedback.success) {
                    alert("提交成功！" + feedback.message);
                    // 可以在这里更新页面内容，比如清空表单、显示成功提示
                    $form[0].reset();
                } else {
                    alert("提交失败：" + feedback.message);
                }
            },
            error: function(xhr, status, err) {
                // 处理请求出错的情况
                console.error("请求错误：", err);
                alert("提交过程中出现错误，请稍后重试");
            }
        });
    });
});
</script>

Controller端代码（ASP.NET MVC示例） #

using System.Web.Mvc;

public class ProcessController : Controller
{
    [HttpPost]
    [ValidateAntiForgeryToken] // 验证防伪令牌，防止CSRF攻击
    public JsonResult Payment(PaymentViewModel model)
    {
        if (ModelState.IsValid)
        {
            // 这里写你的支付处理逻辑，比如调用支付接口、更新数据库等
            // 模拟处理成功
            return Json(new { success = true, message = "支付请求已成功处理" });
        }
        else
        {
            // 表单验证失败，返回错误信息
            var errorMsg = string.Join("; ", ModelState.Values.SelectMany(v => v.Errors.Select(e => e.ErrorMessage)));
            return Json(new { success = false, message = errorMsg });
        }
    }
}

// 对应的ViewModel，根据你的表单字段定义
public class PaymentViewModel
{
    public decimal Amount { get; set; }
    // 其他表单字段...
}

额外注意事项 #

• 确保防伪令牌字段存在于表单中，否则Controller的[ValidateAntiForgeryToken]会验证失败，拒绝请求。
• Controller返回JsonResult可以让前端方便地处理结构化的反馈数据，你也可以根据需求返回PartialViewResult来渲染部分视图。
• 使用绝对路径"/Process/Payment"可以避免页面在子目录时出现的路径错误问题。

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