ASP.NET MVC中用jQuery实现无刷新表单提交并展示结果

别担心，作为JS新手遇到这种情况太正常了，我来一步步帮你排查问题并修正代码，同时带你理解每个步骤的逻辑。

先看你原有代码的核心问题 #

• 选择器匹配错误：你用$("button")绑定点击事件，但表单里的提交按钮是<input type="submit">，不是<button>标签，导致事件根本没绑定到正确元素上，点击自然没反应。
• 未定义的car变量：data: car里的car从来没定义过，AJAX不知道要提交什么数据。
• 大小写拼写错误：datatype应该是dataType（JS严格区分大小写），这会导致AJAX解析返回数据时出错。
• 更新方式不合理：成功后用$('#contactForm').html(data)替换整个表单HTML，会清空用户输入的内容，体验很差。

修正后的完整实现步骤 #

1. 调整HTML表单结构 #

给显示结果的<p>标签加一个唯一ID，方便后续用JS精准更新内容，不用替换整个表单：

<form id="contactForm" method="post" action="@Url.Action("Receiver")">
    <div class="field half first">
        <label for="Name">Name</label>
        <input type="text" name="Name" id="Name" placeholder="Your name" required />
    </div>
    <div class="field half">
        <label for="Email">Email</label>
        <input type="email" name="Email" id="Email" placeholder="Your email" required />
    </div>
    <div class="field">
        <label for="Message">Message</label>
        <textarea name="Message" id="Message" rows="5" placeholder="Your message" required minlength="20"></textarea>
    </div>
    <input type="submit" value="Send Message" />
    <!-- 新增ID，用于后续更新结果 -->
    <p id="resultMessage">@ViewData["ContactActionResult"]</p>
</form>

这里把action改成@Url.Action("Receiver")，让Razor自动生成正确的接口路径，避免硬编码出错。

2. 修正并优化JS代码 #

我们监听表单的submit事件（比监听按钮点击更可靠，用户按回车也能触发），用AJAX异步提交数据：

$(function () {
    // 监听表单提交事件
    $("#contactForm").submit(function (e) {
        // 阻止表单默认的刷新提交行为
        e.preventDefault();
        
        // 自动收集表单所有输入数据，转成键值对格式（比如Name=张三&Email=xxx@xx.com）
        var formData = $(this).serialize();
        
        $.ajax({
            type: "POST",
            // 直接用表单的action属性作为提交地址，不用硬编码
            url: $(this).attr("action"),
            data: formData,
            // 注意大小写：dataType，指定期望后端返回JSON格式
            dataType: "json",
            success: function (response) {
                // 成功后更新结果标签的内容
                $("#resultMessage").text(response.message);
                // 可选：清空表单内容，提升用户体验
                $("#contactForm")[0].reset();
            },
            error: function(xhr) {
                // 错误时获取后端返回的提示，或者显示默认信息
                var errorMsg = xhr.responseJSON?.message || "提交失败，请稍后重试";
                $("#resultMessage").text(errorMsg);
            }
        });
    });
});

3. 调整后端Action方法 #

因为是AJAX请求，让后端返回JSON格式结果会更方便JS处理。比如你的Receiver Action可以改成这样：

[HttpPost]
public ActionResult Receiver(ContactModel 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 }, HttpStatusCode.BadRequest);
    }
}

如果还没有实体类，也可以直接用参数接收：

[HttpPost]
public ActionResult Receiver(string Name, string Email, string Message)
{
    // 简单验证参数
    if (string.IsNullOrEmpty(Name) || string.IsNullOrEmpty(Email) || string.IsNullOrEmpty(Message) || Message.Length <20)
    {
        return Json(new { success = false, message = "请填写完整且有效的信息！" }, HttpStatusCode.BadRequest);
    }
    
    // 处理业务逻辑
    // ...
    
    return Json(new { success = true, message = "消息发送成功！" });
}

关键知识点小科普（帮你理解JS部分） #

• $(function () { ... })：jQuery的文档就绪事件，确保页面所有DOM元素加载完成后再执行JS，避免找不到元素的问题。
• e.preventDefault()：阻止浏览器的默认行为，这里就是阻止表单提交后刷新页面。
• $(this).serialize()：自动把表单里的所有输入字段转换成AJAX能识别的格式，不用手动一个个收集数据，非常省心。
• dataType: "json"：告诉jQuery我们期望后端返回JSON数据，它会自动把返回的字符串解析成JS对象，方便直接用response.message获取内容。

这样修改后，点击提交按钮就不会刷新页面，结果会直接显示在原来的<p>标签里啦！

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