如何通过 AJAX (Native JS) 调用 ASP.NET WebMethod答案

【问题标题】：How to call an ASP.NET WebMethod via AJAX (Native JS)如何通过 AJAX (Native JS) 调用 ASP.NET WebMethod
【发布时间】：2020-06-17 15:44:57
【问题描述】：

有没有办法使用原生 JS AJAX 调用 WebMethod？

类似于：

           $.ajax({
                    type: "POST",
                    url: "AssignAdditional_Equip.aspx/getEquipListing",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        var result = JSON.parse(data.d);
                        console.log(result);
                    },
                    error: function (response) {
                        alert(response);
                    }
                });

下面的代码是我的尝试：

var requestVar = new XMLHttpRequest();
requestVar.open('GET', 'AssignAdditional_Equip.aspx/getEquipListing');
requestVar.onload = function () {
    if (requestVar.status === 200) {
        console.log(requestVar.responseText);
    }
    else {
        alert('Request failed.  Returned status of ' + xhr.status);
    }
};
requestVar.send();

编辑：这是我关于代码隐藏的网络方法，以消除一些混乱

    <WebMethod>
Public Shared Function getEquipListing()
    Dim equipType_Options As New List(Of String)
    Dim serializer As New JavaScriptSerializer
    Dim sqlConn As New SqlConnection
    Dim reader As SqlDataReader

    sqlConn.ConnectionString = ConfigurationManager.ConnectionStrings("ITSGinventory").ConnectionString

    Dim sqlCmd As New SqlCommand("SELECT DISTINCT(Equipment_Type) FROM tbl_Equipments ORDER BY Equipment_Type ASC", sqlConn)

    sqlConn.Open()

    reader = sqlCmd.ExecuteReader

    While reader.Read()
        equipType_Options.Add(reader("Equipment_Type"))
    End While

    sqlConn.Close()
    sqlConn.Dispose()

    Return serializer.Serialize(equipType_Options)
End Function

webmethod 应该返回一个序列化的字符串列表。使用 JQuery，它按预期工作。但是我的原生 AJAX 方法返回页面的 HTML 标记而不是字符串值。我做错了吗？

【问题讨论】：

标签： javascript asp.net ajax vb.net webmethod

【解决方案1】：

我认为您可以使用带有 json 方法的 fetch 函数从 http 响应中提取。很好地解释了如何使用here。例如：

let response = await fetch(url);
if (response.ok) { // if HTTP-status is 200-299
  let json = await response.json();
} else {
  alert("HTTP-Error: " + response.status);
}

【讨论】：

感谢您的建议！当我尝试使用它时，这很有效，但是，我需要一些与旧浏览器向后兼容的东西。所以，我会坚持使用XMLHttpRequest 一段时间。 Fetch API 对于未来的新浏览器来说是一个很好的解决方案。

【解决方案2】：

好的，在阅读、研究和重写我的代码之后，我能够完成这项工作。我只需要添加xmlHttp.setRequestHeader('Content-Type', 'application/json'); 并且能够从我的 WebMethod 获得响应。哈哈。

在尝试调用/调用具有 JSON 返回类型的 ASP.NET WebMethods 时，请始终牢记这一点。

【讨论】：