使用jQuery AJAX向Http Post传参时遇未知错误及相关问题

核心问题分析 #

• 脚本引用顺序错误：jQuery未优先加载，导致依赖它的代码无法执行
• JS语法错误：AJAX配置中url = ...使用等号而非冒号，触发脚本报错中断执行
• 元素选择器不匹配：绑定事件的按钮IDbtnPost与实际按钮IDchangeButton不一致
• 输入值获取错误：val是jQuery方法，需加()调用，且错误地将alert嵌入请求参数中
• 控制器返回未携带更新模型：无法为前端提供最新库存数据

分步修正代码 #

1. 修正脚本引用顺序 #

将jQuery放在最前面，确保依赖它的脚本能正常初始化：

<script src="~/js/jquery-3.5.1.min.js"></script>
<script src="~/js/jquery.unobtrusive-ajax.min.js"></script>

2. 修复前端JS代码 #

修正语法错误、选择器匹配问题，正确获取输入值，并在AJAX成功后更新页面：

<script type="text/javascript">
    $(function () {
        // 绑定实际按钮ID
        $("#changeButton").click(function () {
            // 获取并校验输入值
            const quantity = parseInt($("#qnt").val());
            if (isNaN(quantity) || quantity <= 0) {
                alert("请输入有效的正整数");
                return;
            }

            $.ajax({
                type: "POST",
                // 使用Url.Action生成正确路由，避免硬编码
                url: '@Url.Action("QuantityAdd", "Home")',
                data: { 
                    idProduct: @Model.Product.Id, 
                    quantity: quantity 
                },
                success: function (partialViewHtml) {
                    // 更新库存显示区域
                    $("#countDisplay").html(partialViewHtml);
                    // 清空输入框
                    $("#qnt").val("");
                },
                error: function (xhr, status, error) {
                    // 错误调试信息
                    console.error("请求失败:", error);
                    alert("更新库存失败，请重试");
                }
            });
        });
    })
</script>

3. 调整视图结构 #

为库存显示区域添加ID，方便AJAX成功后替换内容：

@using vp_server.Models.ViewModels
@model vp_server.Models.ViewModels.ProductViewsTransactions
<!DOCTYPE html>
<html>
<body>
    <!-- 新增ID用于后续更新 -->
    <div id="countDisplay">
        <label>The quantity at the moment: @Model.Count</label>
    </div>
    <form>
        <label>Entrance:</label>
        <input type="number" id="qnt" name="quantity" min="1" />
        <input type="button" id="changeButton" value="Add" />
    </form>
</body>
</html>

4. 完善控制器方法 #

返回携带最新库存数据的局部视图，同时处理库存记录不存在的情况：

[HttpPost]
public async Task<IActionResult> QuantityAdd(int idProduct, int quantity)
{
    using (VapeshopContext db = new VapeshopContext())
    {
        ProductCount? productCount = db.ProductCounts.FirstOrDefault(pc => pc.ProductId == idProduct);
        
        // 若库存记录不存在，创建新记录
        if (productCount == null)
        {
            productCount = new ProductCount
            {
                ProductId = idProduct,
                Count = quantity
            };
            db.ProductCounts.Add(productCount);
        }
        else
        {
            productCount.Count += quantity;
        }
        
        await db.SaveChangesAsync();

        // 返回携带最新库存的局部视图
        return PartialView("_ProductCountPartial", productCount.Count);
    }            
}

5. 创建局部视图（_ProductCountPartial.cshtml） #

专门用于渲染更新后的库存显示内容：

@model int
<label>The quantity at the moment: @Model</label>

关键注意事项 #

• 始终确保jQuery先于依赖脚本加载，避免$ is not defined错误
• 使用@Url.Action生成路由地址，避免硬编码导致的路由匹配失败
• 对用户输入进行合法性校验，防止无效数据提交到后端
• 在AJAX中添加错误处理逻辑，便于快速定位问题
• 控制器返回局部视图时，必须传入更新后的模型数据，确保前端获取最新状态

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