jquery ajax post json asp.net core - C++ (1)

📌 相关文章

📜 jquery ajax post json asp.net core - C++ (1)

📅 最后修改于: 2023-12-03 15:32:08.117000 🧑 作者: Mango

jquery ajax post json asp.net core - C++

本文将介绍如何在 ASP.NET Core 中通过 jQuery AJAX 发送 JSON 数据。

什么是 AJAX？

AJAX 指的是 Asynchronous JavaScript And XML，异步的 JavaScript 和 XML。它是一种在不重载整个页面的情况下，通过 JavaScript 发送 HTTP 请求并获取服务器响应的技术。AJAX 具有以下优点：

后台与前台交互速度快，不需要重载整个页面。
增强了用户交互体验，无缝加载数据。
可以提高网站的性能和速度。

如何使用 AJAX 发送 POST 请求？

下面是使用 jQuery 发送 AJAX POST 请求的基本代码：

$.ajax({
    url: '/path/to/script', // 服务器端 URL
    type: 'POST', // 请求类型
    contentType: 'application/json', // 请求的内容类型
    data: JSON.stringify({key1: value1, key2: value2, ...}), // 发送的 JSON 数据
    success: function(data) {
        // 请求成功的回调函数
        console.log(data);
    },
    error: function(xhr, status, error) {
        // 请求失败的回调函数
        console.error(error);
    }
});

在上面的代码中，url 指定了服务器端的 URL，type 指定请求类型为 POST，contentType 指定请求的内容类型为 application/json，data 是需要发送的 JSON 数据。

如果请求成功，将会调用 success 回调函数，并将服务器响应作为参数传递给它。如果请求失败，将会调用 error 回调函数，并将 XMLHttpRequest 对象、错误状态和错误信息作为参数传递给它。

如何在 ASP.NET Core 中接收请求？

在 ASP.NET Core 中，可以在控制器的方法中通过 [HttpPost] 特性和 FromBody 参数来接收请求。以下是一个示例方法：

[HttpPost]
public IActionResult PostData([FromBody] MyData data)
{
    try
    {
        // 处理接收到的数据，并返回处理结果
        return Ok(new { success = true, message = "Data received and processed." });
    }
    catch (Exception ex)
    {
        // 返回错误信息
        return BadRequest(new { success = false, message = ex.Message });
    }
}

在上面的代码中，[HttpPost] 特性用于表示该方法接收 POST 请求，[FromBody] 则用于表示从请求正文中获取数据。

MyData 类是一个自定义的数据模型，用于表示接收到的 JSON 数据。例如：

public class MyData
{
    public string Key1 { get; set; }
    public int Key2 { get; set; }
}

在方法中，可以通过 data 参数来访问接收到的 JSON 数据。例如：

string key1 = data.Key1;
int key2 = data.Key2;

完整的示例代码

以下是一段完整的示例代码，用于演示如何在 ASP.NET Core 中接收 JSON 数据并处理。

MyData.cs

public class MyData
{
    public string Key1 { get; set; }
    public int Key2 { get; set; }
}

HomeController.cs

public class HomeController : Controller
{
    [HttpGet]
    public IActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public IActionResult PostData([FromBody] MyData data)
    {
        try
        {
            // 处理接收到的数据，并返回处理结果
            return Ok(new { success = true, message = "Data received and processed." });
        }
        catch (Exception ex)
        {
            // 返回错误信息
            return BadRequest(new { success = false, message = ex.Message });
        }
    }
}

Index.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>AJAX POST JSON Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="btnPostData">Post Data</button>
    <script>
        $(function () {
            $("#btnPostData").click(function () {
                var data = {
                    key1: "value1",
                    key2: 123
                };

                $.ajax({
                    url: "/Home/PostData",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    success: function (result) {
                        console.log(result);
                    },
                    error: function (xhr, status, error) {
                        console.error(error);
                    }
                });
            });
        });
    </script>
</body>
</html>

结论

本文介绍了如何在 ASP.NET Core 中使用 jQuery AJAX 发送 JSON 数据，并提供了一个完整的示例代码。希望读者能够从中受益，加深对 AJAX 的理解。