webform使用ajax访问后端接口的两种方法

在ASP.NET Web Forms中，使用AJAX访问后端接口的常见方法有两种：使用ASP.NET AJAX和使用jQuery。

1. 使用ASP.NET AJAX：

ASP.NET AJAX是微软提供的一套库，可以使用它来创建基于AJAX的应用。

示例代码：

首先，在页面上添加ScriptManager控件，然后在后端的代码中创建一个处理AJAX请求的WebMethod。

前端代码：

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <input type="button" value="Call Web Method" onclick="callWebMethod();" />
        <div id="result"></div>
    </ContentTemplate>
</asp:UpdatePanel>

<script type="text/javascript">
    function callWebMethod() {
        PageMethods.MyWebMethod(onSucceeded);
    }
 
    function onSucceeded(result) {
        document.getElementById('result').innerHTML = result;
    }
</script>

后端代码：

[System.Web.Services.WebMethod]
public static string MyWebMethod()
{
    return "Hello, World!";
}

2. 使用jQuery：

jQuery是一个非常受欢迎的JavaScript库，它可以用来简化AJAX调用。

示例代码：

前端代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="button" value="Call Web API" onclick="callWebAPI();" />
<div id="result"></div>

<script type="text/javascript">
    function callWebAPI() {
        $.ajax({
            type: "GET",
            url: "YourWebAPIPath",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(response) {
                $('#result').html(response.YourDataField);
            },
            failure: function(xhr, status, error) {
                alert("An error occurred: " + status + " - " + error);
            }
        });
    }
</script>

后端代码（Web API）：

public class YourController : ApiController
{
    public HttpResponseMessage Get()
    {
        string data = "Hello, World!";
        HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK, new { YourDataField = data });
        return response;
    }
}

在这两种方法中，你可以选择最适合你的项目需求的方法。使用ASP.NET AJAX适合与服务器端代码紧密耦合的项目，而使用jQuery适合需要更灵活性和可维护性的项目。