jQuery Ajax调用ASP.NET C#后台方法异常问题排查求助

核心问题原因 #

• 函数作用域错误：你将SaveImage函数定义在了$(document).ready()的回调参数中，属于局部函数，全局作用域无法访问，因此按钮的OnClientClick触发时找不到对应函数，直接报错。
• 按钮默认行为未阻止：asp:Button点击默认会提交表单刷新页面，就算Ajax触发也会被刷新打断。
• Ajax回调参数错误：jQuery ajax的失败回调参数是error不是failure，出错时无法触发提示。
• 后端方法配置正确：你已经给GetData加上了[WebMethod]特性且声明为静态，符合PageMethod的调用要求，URL配置JavaScript.aspx/GetData在页面同路径下是正确的。

修改后的代码 #

前端JavaScript.aspx修改 #

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="WebApplication.JavaScript" %>  
<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title></title>  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
         <script>  
             // 定义为全局函数，OnClientClick才能访问到
             function SaveImage() {
                 $.ajax({
                     type: "POST",
                     url: "JavaScript.aspx/GetData",
                     contentType: "application/json; charset=utf-8",
                     dataType: "json",
                     success: function (response) {
                         $("#Content").text(response.d);
                         alert('Function called successfully !');
                     },
                     // 改failure为error
                     error: function (response) {
                         alert(response.responseText);                         
                     }
                 });
                 // 阻止表单提交默认行为，避免页面刷新
                 return false;
             }
         </script> 
</head>  
    
<body>  
    <form id="frm" runat="server">
    <div id="Content">  
    </div>  
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <br />
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="ASP Button" />
        <!-- OnClientClick加return，接收函数返回的false阻止默认行为 -->
        <asp:Button ID="BtnAgain" runat="server" OnClientClick="return SaveImage()" Text="JS Button" />          

    </form>
</body>

</html>  

后端JavaScript.aspx.cs无需修改 #

你现有的后端代码已经满足要求，[WebMethod]修饰的静态方法可以被前端Ajax正常调用。

验证方法 #

点击按钮前按F12打开浏览器开发者工具：

• 切换到「控制台」面板，可以查看是否有JS报错
• 切换到「网络」面板，点击按钮后可以看到对应的POST请求，检查请求地址、响应内容是否符合预期

内容的提问来源于stack exchange，提问作者CP van Vuuren