ASP.NET Web Forms用jQuery AJAX调用后台返回整页而非布尔值问题求助

问题根因 #

你遇到的返回整页HTML的核心原因是ASP.NET Web Forms的页面后台方法要被AJAX直接调用，必须满足[WebMethod]+静态的要求，你之前对「静态方法不能操作数据库」的误解是错误的，静态方法只是不能直接访问页面的控件实例，数据库操作只依赖连接字符串，完全可以在静态方法中正常执行。

方案1：改造为符合要求的页面WebMethod（推荐） #

第一步：修改Login.aspx后台代码 #

修正后台方法的同时，修复原代码存在的空引用异常、SQL注入风险：

// 必须添加WebMethod特性，且方法声明为静态
[System.Web.Services.WebMethod]
public static bool GetDoublicate(string email)
{
    // 静态方法可正常读取配置中的连接字符串
    string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["你的连接字符串配置名"].ConnectionString;
    using (SqlConnection con = new SqlConnection(connectionString))
    {
        con.Open();
        // 使用参数化查询避免SQL注入漏洞
        string sqltext = "select id from CoAuthor where email=@Email";
        using (SqlCommand cmd = new SqlCommand(sqltext, con))
        {
            cmd.Parameters.AddWithValue("@Email", email);
            object result = cmd.ExecuteScalar();
            // 邮箱不存在返回true，存在返回false，和你原有逻辑一致
            return result == null;
        }
    }
}

第二步：修改前端AJAX请求代码 #

调整请求参数适配WebMethod的调用规则：

$(document).ready(function () {
    $('#Text2').change(function () {
        $.ajax({
            type: "POST", // WebMethod默认仅接受POST请求，开启GET需要额外配置
            url: "Login.aspx/GetDoublicate",
            contentType: "application/json; charset=utf-8", // 必须添加该请求头
            data: JSON.stringify({"email": $('#Text2').val() }), // 参数需要转为JSON字符串
            dataType: "json",
            success: function (response) {
                // WebForms页面方法的返回值会默认包裹在d属性中
                var isEmailAvailable = response.d;
                console.log(isEmailAvailable);
                // 后续可根据返回值写提示逻辑
            },
            error: function(xhr){
                console.log("请求出错：", xhr.responseText);
            }
        });
    })
})

方案2：使用一般处理程序（ASHX，无需静态方法） #

如果你确实不想使用静态方法，可以新建一个CheckEmail.ashx一般处理程序处理请求：

第一步：编写ASHX处理逻辑 #

public class CheckEmail : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        string email = context.Request.QueryString["email"];
        string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["你的连接字符串配置名"].ConnectionString;
        using (SqlConnection con = new SqlConnection(connectionString))
        {
            con.Open();
            string sqltext = "select id from CoAuthor where email=@Email";
            using (SqlCommand cmd = new SqlCommand(sqltext, con))
            {
                cmd.Parameters.AddWithValue("@Email", email);
                object result = cmd.ExecuteScalar();
                context.Response.Write(result == null ? "true" : "false");
            }
        }
    }

    public bool IsReusable
    {
        get { return false; }
    }
}

第二步：修改前端AJAX请求 #

$.ajax({
    type: "GET",
    url: "CheckEmail.ashx",
    data: {"email":$('#Text2').val() },
    dataType: "text",
    success: function (response) {
        console.log(response); // 直接返回true/false字符串
    }
});

关于UpdatePanel方案的补充 #

如果要使用UpdatePanel实现该功能，需要把邮箱输入框也放入UpdatePanel中，设置输入框的AutoPostBack="true"，然后在输入框的TextChanged事件中写判断逻辑，但是该方案会走完整页面生命周期，性能开销远高于上述两个方案。

内容的提问来源于stack exchange，提问作者Anas deve