AJAX JQuery 发送 POST 请求到 C# 后台

在本文中，我们将介绍如何使用 AJAX JQuery 发送 POST 请求到 C# 后台。AJAX（Asynchronous JavaScript and XML）允许我们通过在后台发送和接收数据，实现页面的异步更新。JQuery 是一个流行的 JavaScript 库，它提供了简化 AJAX 请求的方法。

阅读更多：AJAX 教程

什么是 AJAX

AJAX 是一种用于在客户端和服务器之间无需刷新整个页面的情况下，异步地交换数据和更新部分网页内容的技术。AJAX 基于以下几个核心技术：

使用 XMLHttpRequest 对象与服务器进行异步通信；
使用 JavaScript 和 HTML/CSS 定义和显示数据；
使用 XML 或 JSON 进行数据交换；
使用异步请求和回调函数处理服务器响应。

AJAX 的优势在于可以带来更好的用户体验和更高的性能。例如，在一个用户输入查询关键字的搜索框中，通过 AJAX 技术，可以在用户输入时实时显示搜索结果，而不需要刷新整个页面。

使用 AJAX JQuery 发送 POST 请求

在使用 AJAX JQuery 发送 POST 请求之前，首先需要确保页面中引入了 JQuery 库。可以通过以下方式引入：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

接下来，我们可以使用 $.ajax() 函数来发送 POST 请求到 C# 后台。该函数的基本语法如下：

$.ajax({
  url: "后台地址",
  type: "POST",
  data: 数据对象,
  success: 成功回调函数,
  error: 失败回调函数
});

在上述代码中，url 参数代表后台的地址，type 参数指定请求类型为 POST，data 参数是一个包含要发送到服务器的数据的对象，success 参数是一个在请求成功时执行的回调函数，error 参数是一个在请求失败时执行的回调函数。

接下来，我们将通过一个简单的示例来演示如何使用 AJAX JQuery 发送 POST 请求到 C# 后台。

我们先创建一个 HTML 页面，其中包含一个按钮和一个用于显示服务器响应的 <div> 元素：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="sendButton">发送请求</button>
  <div id="response"></div>

  <script>
     $(document).ready(function() {$ ("#sendButton").click(function() {
         $.ajax({ url: "后台地址", type: "POST", data: {name: "John", age: 30}, success: function(response) {$ ("#response").text(response);
          },
          error: function() {
            $("#response").text("请求失败");
          }
        });
      });
    });
  </script>
</body>
</html>

在上述代码中，当用户点击按钮时，会触发一个点击事件处理函数。该函数使用 $.ajax() 函数发送 POST 请求到后台，并在成功时将服务器响应设置为 <div> 元素的文本内容，失败时显示提示信息。

接下来，我们需要在 C# 后台处理该请求。假设后台的地址为 后台地址，可以通过以下方式处理该请求：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace YourNamespace
{
    public class YourClassName
    {
        [WebMethod]
        public string ProcessRequest(string name, int age)
        {
            // 处理请求逻辑
            return "Hello " + name + "! Your age is " + age + ".";
        }
    }
}

在上述代码中，我们通过创建一个名为 YourClassName 的类，并使用 ProcessRequest 方法处理 POST 请求。该方法接收 JSON 数据的名称和年龄，并返回一个包含问候语的字符串。