Ajax 调用成功，但从 web api 填充数据未定义

Question

我无法弄清楚为什么我的 ajax 调用一直显示未定义的只是这个调用，但在我所有的其他代码中它工作正常。

这是我得到的：

这是我通过 ID 搜索时得到的结果：

这是我的 ajax 代码：

$("#btnGetTaxByBL").click(function () {
            var strURL = "https://localhost:44395/api/ServiceDeed/GetByBlockNLot/" + blockNo + "/" + lotNo;

            $("#display").html("");
            $("#msg").html("");
            $("#update").html("");
            $("#updateResult").html("");

            console.log("btnGetTaxByBL clicked");

            var blockNo = $("#txtBlockNo").val();
            var lotNo = $("#txtLotNo").val();

            $.ajax({
                type: "GET",
                url: strURL,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var owner = data;

                    $("#display").html("<hr><p>".concat("HomeOwnerID: ", owner.HomeOwnerID,
                        "<br>FirstName: ", owner.FirstName, "<br>LastName: ", owner.LastName,
                        "<br>Address: ", owner.Address, "<br>City: ", owner.City,
                        "<br>State: ", owner.State, "<br>ZipCode: ", owner.ZipCode,
                        "<br>Telephone Number: ", owner.TelNo, "<br>Email: ", owner.Email,
                        "<br>Block Number: ", owner.BlockNo, "<br>Lot Number: ", owner.LotNo,
                        "<br>Date of Sale: ", owner.SaleDate, "<br>Sale Price: $", owner.SalePrice,
                        "<br>Sold Status: ", owner.IsSold, "<br>Accessed Value: ", owner.AccessedVal,
                        "<br>Land Value: ", owner.LandVal, "<br>Additional Value: ", owner.AdditionalVal,
                        "<br>Tax Rate: ", owner.TaxRate, "<br>Tax Per Year: ", owner.TaxPerYear,
                        "<br>Real Estate Tax: ", owner.RealEstateTax));

                },
                error: function (req, status, error) {
                    alert("Error: " + req.responseText + " | " + status + " | " + error);
                }
            }); //end of ajax method
        }); // end of btnGetTaxByBL click event

这是我的控制器的代码：

[HttpGet("GetByBlockNLot/{block}/{lot}")]
    public List<HomeTax> GetByBlockNLot(int block, int lot)
    {
        List<HomeTax> homeTaxList = new List<HomeTax>();
        DBConnect objDB = new DBConnect();
        String strSQL = "SELECT * FROM HomeOwnership_T INNER JOIN TaxInfo_T ON HomeOwnership_T.HomeOwnerID=TaxInfo_T.HomeOwnerID WHERE BlockNo =" + block + " AND LotNo =" + lot;
        int count = 0;

        objDB.GetDataSet(strSQL, out count);

        for (int i = 0; i < count; i++)
        {
            HomeTax objOwner = new HomeTax();
            objOwner.HomeOwnerID = (int)objDB.GetField("HomeOwnerID", i);
            objOwner.FirstName = (string)objDB.GetField("FirstName", i);
            objOwner.LastName = (string)objDB.GetField("LastName", i);
            objOwner.Address = (string)objDB.GetField("Address", i);
            objOwner.City = (string)objDB.GetField("City", i);
            objOwner.State = (string)objDB.GetField("State", i);
            objOwner.ZipCode = (string)objDB.GetField("ZipCode", i);
            objOwner.TelNo = (string)objDB.GetField("TelNo", i);
            objOwner.Email = (string)objDB.GetField("Email", i);
            objOwner.BlockNo = (int)objDB.GetField("BlockNo", i);
            objOwner.LotNo = (int)objDB.GetField("LotNo", i);
            objOwner.SaleDate = (DateTime)objDB.GetField("SaleDate", i);
            objOwner.SalePrice = (Decimal)objDB.GetField("SalePrice", i);
            objOwner.IsSold = (string)objDB.GetField("IsSold", i);
            objOwner.AccessedVal = (Decimal)objDB.GetField("AccessedVal", i);
            objOwner.LandVal = (Decimal)objDB.GetField("LandVal", i);
            objOwner.AdditionalVal = (Decimal)objDB.GetField("AdditionalVal", i);
            objOwner.TaxRate = (Decimal)objDB.GetField("TaxRate", i);
            objOwner.TaxPerYear = (Decimal)objDB.GetField("TaxPerYear", i);
            objOwner.RealEstateTax = (Decimal)objDB.GetField("RealEstateTax", i);

            homeTaxList.Add(objOwner);
        }
        return homeTaxList;
    }

Answer 1

你的API返回一个列表，所以你应该添加一个“for”语句来显示对象列表，你不能使用“owner”变量作为对象，因为它是一个对象数组。

Answer 2

这是你的问题

您在strURL 中使用blockNo 和lotNo，然后它们被分配了一个值

$("#btnGetTaxByBL").click(function () {
    var strURL = "https://localhost:44395/api/ServiceDeed/GetByBlockNLot/" + blockNo + "/" + lotNo;
    // at this point, blockNo and lotNo are "undefined
        $("#display").html("");
        $("#msg").html("");
        $("#update").html("");
        $("#updateResult").html("");

        console.log("btnGetTaxByBL clicked");

        var blockNo = $("#txtBlockNo").val();
        var lotNo = $("#txtLotNo").val();

只需更改代码以获取blockNo 和lotNo，然后在strUrl 中使用它们即可解决第一个问题

$("#btnGetTaxByBL").click(function () {
    var blockNo = $("#txtBlockNo").val();
    var lotNo = $("#txtLotNo").val();
    var strURL = "https://localhost:44395/api/ServiceDeed/GetByBlockNLot/" + blockNo + "/" + lotNo;
    // now you are passing values rather than undefined
    $("#display").html("");
    $("#msg").html("");
    $("#update").html("");
    $("#updateResult").html("");

    console.log("btnGetTaxByBL clicked");

下一个问题是，结果是一个列表（从外观上看，它将作为一个数组发送）-但您没有将响应用作数组

通过改变

success: function (data) {
    var owner = data;
    $("#display").html( ... rest of your code

到

success: function (data) {
    var owner = data[0];
    $("#display").html( ... rest of your code

即访问接收到的数组中的 FIRST 结果，您现在将根据需要显示数据

如果您期望一个数组，即多条记录，那么您的代码将需要进行重大更改，因为您需要遍历数据并输出多条记录

可能是这样的

success: function (data) {
    var owner = data;
    var html = data.map(function(owner) {
        return "<hr><p>".concat("HomeOwnerID: ", owner.HomeOwnerID,
        "<br>FirstName: ", owner.FirstName, "<br>LastName: ", owner.LastName,
        "<br>Address: ", owner.Address, "<br>City: ", owner.City,
        "<br>State: ", owner.State, "<br>ZipCode: ", owner.ZipCode,
        "<br>Telephone Number: ", owner.TelNo, "<br>Email: ", owner.Email,
        "<br>Block Number: ", owner.BlockNo, "<br>Lot Number: ", owner.LotNo,
        "<br>Date of Sale: ", owner.SaleDate, "<br>Sale Price: $", owner.SalePrice,
        "<br>Sold Status: ", owner.IsSold, "<br>Accessed Value: ", owner.AccessedVal,
        "<br>Land Value: ", owner.LandVal, "<br>Additional Value: ", owner.AdditionalVal,
        "<br>Tax Rate: ", owner.TaxRate, "<br>Tax Per Year: ", owner.TaxPerYear,
        "<br>Real Estate Tax: ", owner.RealEstateTax);
    }).join('');
    $("#display").html(html);
},