如何通过AJAX（本地JS）调用ASP.NET WebMethod

Question

是否有使用本地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.setRequestHeader('Content-Type', 'application/json');
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

该网络方法应该返回字符串的序列化列表。使用JQuery，它可以按预期工作。但是我的本机AJAX方法返回页面的HTML标记而不是字符串值。我做错了吗？

Answer 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);
}

Answer 2

jQuery-Ajax

   $.ajax({
   type: "POST",
   contentType: "application/json; charset=utf-8",
   url: "companyentry.aspx/loadrecordthana",
   data: JSON.stringify(obj),
   dataType: "json",
   beforeSend: function () {
   },
   complete: function () {
   },
   success: function (data) {
   console.log(data);
   $("#ThanaDropDownList").empty();
   $("#ThanaDropDownList").append($("<option></option>").val("-1").html("Select"));
   $.each(data.d, function () {
   $("#ThanaDropDownList").append($("<option> 
   </option>").val(this['DistrictId']).html(this['District']));
   })
   },
   error: function () {
       alert('Error');
        }
   });

ASPX.cs

[WebMethod]  //Have to use this annotation because this method will be called from jQuery/Ajax

public static List<DistrictModel> LoadRecordThana(int parentId)
{
    try
    {
        List<DistrictModel> ThanaList = new List<DistrictModel>();
        using (AdminCompanyGateway aCompanyGateway = new AdminCompanyGateway())
        {
            DataTable dtThana = aCompanyGateway.LoadRecordThana(parentId);

            for (int i = 0; i < dtThana.Rows.Count; i++)
            {
                DistrictModel Dm = new DistrictModel
                {
                    DistrictId = Convert.ToInt32(dtThana.Rows[i]["DistrictId"]),
                    District = Convert.ToString(dtThana.Rows[i]["District"])
            };
                ThanaList.Add(Dm);
            }
        }
        return ThanaList;
    }

    catch (Exception Exp)
    {
        throw (Exp);

    }
}