Ajax传Jsond Mvc后台接收实例

在现代Web开发中，我们经常使用Ajax与后台交互，特别是在处理前端库存检查时。以下是一个使用Ajax传递JSON数据到MVC后台的简单示例。对于感兴趣的朋友们，这是一个参考实现，希望能帮助大家。

后台代码实现（MVC）：

```csharp

[HttpPost]

public JsonResult CheckStock(IEnumerable pvIds)

{

// 处理库存检查逻辑

}

public class pvIdsCount

{

public int pvId { set; get; } // 产品变种ID

public int count { set; get; } // 数量

}

```

前台代码实现（JavaScript）：

当页面加载完成时，为“checkout”按钮绑定点击事件，触发库存检查功能：

```javascript

$(document).ready(function() {

$('checkout').click(function() {

var productIdCounntList = []; // 存储产品ID和数量的列表

var allPvId = $(".productVariantIdAll"); // 获取所有产品变种ID的集合

$.each(allPvId, function(index, item) { // 遍历每个产品变种ID元素

var productIdCounnt = {

pvId: item.getAttribute("data-Id"), // 获取产品变种ID

count: item.getAttribute("data-Count") // 获取数量

};

productIdCounntList.push(productIdCounnt); // 将数据添加到列表中

});

// 使用Ajax发送POST请求到后台检查库存

$.ajax({

url: "@Url.Action("CheckStock")", // 设置后台接口地址

type: "POST", // 使用POST方法发送请求

data: JSON.stringify({ pvIds: productIdCounntList }), // 将列表序列化为JSON字符串并发送

contentType: 'application/json; charset=utf-8', // 设置请求头为JSON格式

dataType: "json", // 期望的返回数据类型为JSON

success: function(data) {

// 请求成功后的回调函数，可以在这里处理返回的数据（例如更新页面元素等）

},

error: function() {

alert("库存检查失败"); // 请求失败时的提示信息

} // 错误处理函数，用于处理请求失败的情况（例如网络错误等） 无需使用“suess”，因为拼写错误并且此写法无效。请改用“success”。"alert('1');"对用户提供的信息量较少，建议使用更具描述性的提示信息。 需要注意的是，后台代码中的注释需要翻译成中文，以便于理解。前台代码中的注释可以直接使用英文以保持一致性。在Ajax请求中，"contentType"和"dataType"参数必须正确设置以确保前后台数据的正确交换和处理。对于数据的传输和接收，需要确保前后台的数据格式和类型保持一致。这个简单的例子展示了如何使用Ajax和MVC进行前后台交互，希望能对大家有所帮助。