dataType为html时如何正确判断boolean值处理AJAX返回逻辑

配置dataType: html时，AJAX success回调接收到的result永远是字符串类型的HTML片段，无论返回的是有数据视图还是无数据视图，只要视图内容非空，JS宽松相等判断下非空字符串都会被判定为真值，因此if (result == true)会永远命中true分支，逻辑完全失效。且当前后端仅返回视图内容，没有携带任何可用于分支判断的状态标识，无法直接通过返回值本身识别布尔状态。

方案1：自定义响应头传递状态（无侵入，推荐） #

不需要修改现有视图渲染逻辑，仅在Controller返回视图时追加自定义响应头标记数据状态，前端从响应头读取状态做分支判断即可。

后端Controller修改 #

if (Reader.HasRows)
{
    Response.Headers["X-Data-State"] = "has";
    return View("TrueViewPort");
}
else
{
    Response.Headers["X-Data-State"] = "none";
    return View("FalseViewPort");
}

前端AJAX修改 #

jQuery的success回调第三个参数为原生XMLHttpRequest实例，可通过该实例读取响应头：

$.ajax({
    url: "UrlToController",
    type: "GET",
    data: { uname: uname },
    dataType: "html",
    success: function (result, _, xhr) {
        const state = xhr.getResponseHeader("X-Data-State");
        if (state === "has") {
            $('#wishlist-carousel').html(result);
            $(".no-page").hide();
        } else {
            $(".no-page").html(result);
            $('#wishlist-carousel').hide();
        }
    },
    error: function (xhr, status) {
        alert(status);
    }
})

方案2：返回结构化JSON数据 #

将视图渲染为字符串后，和状态字段一起封装为JSON返回，前端直接读取JSON内的状态字段判断，逻辑更直观。

后端Controller修改 #

先实现视图转字符串的辅助方法，再统一返回JSON：

// 辅助方法：将视图渲染为HTML字符串
public string RenderViewToStr(string viewName, object model = null)
{
    ViewData.Model = model;
    using (var sw = new StringWriter())
    {
        var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
        var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
        viewResult.View.Render(viewContext, sw);
        viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
        return sw.GetStringBuilder().ToString();
    }
}

// 接口逻辑
public ActionResult GetWishList(string uname)
{
    // 原有sql查询逻辑省略
    bool hasRows = Reader.HasRows;
    string html = hasRows ? RenderViewToStr("TrueViewPort") : RenderViewToStr("FalseViewPort");
    return Json(new { hasData = hasRows, html = html }, JsonRequestBehavior.AllowGet);
}

前端AJAX修改 #

将dataType改为json，直接读取返回结构的状态字段：

$.ajax({
    url: "UrlToController",
    type: "GET",
    data: { uname: uname },
    dataType: "json",
    success: function (res) {
        if (res.hasData) {
            $('#wishlist-carousel').html(res.html);
            $(".no-page").hide();
        } else {
            $(".no-page").html(res.html);
            $('#wishlist-carousel').hide();
        }
    },
    error: function (xhr, status) {
        alert(status);
    }
})

注意：不要通过判断返回HTML的长度、是否包含特定DOM关键字的方式做分支判断，这类写法耦合度极高，后续视图内容调整时极易出现判断失效问题。

内容的提问来源于stack exchange，提问作者エース