jQuery Ajax调用在Asp.net中不起作用

yuvru6vn  于 5个月前  发布在  jQuery
关注(0)|答案(1)|浏览(46)

我已经搜索了许多解决方案,但没有工作.我只是做一个简单的Ajax调用使用Jquery在Visual studio 2019,但我的代码是不打Ajax调用.这里是我的代码

<script src="Scripts/jquery-1.11.3.min.js"></script>
 <script type="text/javascript">
    
    function GetDataDetails() {            
        $.ajax({
            type: "POST",
            url: "WebForm1.aspx/GetData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",               
            success: function (response) {
                var xmlDoc = $.parseXML(response.d);
                var xml = $(xmlDoc);
                var Records = xml.find("Table");
                if (Records.length > 0) {
                    alert(Records.length);
                }
            },                
            error: function (d) {
                alert(d.responseText);
            }
        });
    }

    $(function () {
        $("[id*=Button1]").bind("click", function () {
            GetDataDetails();
            return false;
        });            
    });
</script>

字符串
c#代码

[WebMethod]
        public static string GetData()
        {
            using (SqlCommand Cmd = new SqlCommand())
            {
                using (SqlConnection Con = Connections.Create())
                {
                    Cmd.Connection = Con;
                    Cmd.CommandText = "GetColumnList_pro".Trim();
                    Cmd.CommandType = CommandType.StoredProcedure;
                    Cmd.Parameters.AddWithValue("Option", "GetColumnList".Trim());
                    using (SqlDataAdapter Adp = new SqlDataAdapter())
                    {
                        using (DataSet Ds = new DataSet())
                        {
                            Con.Open();
                            Adp.SelectCommand = Cmd;
                            Adp.Fill(Ds);
                            return Ds.GetXml();
                        }
                    }
                }
            }
        }


我在Chrome上使用了断点,并检查它是否命中了GetDataDetails方法,但当它到达第一行$.ajax({时,它就从方法中退出了。
当我调试我的代码时,没有错误。它也命中了方法,但从这里出来$.ajax({
我错过了什么?

ztmd8pv5

ztmd8pv51#

你没有显示按钮标记。(所以,这是一个关于一些按钮点击代码不工作的问题,但是按钮的所有重要标记都丢失了)。
我不建议你编写代码来给按钮附加一些click事件,在大多数情况下,你最好直接在按钮的标记中输入click函数来运行。
引入jQuery选择器代替一些简单的标记会在代码中引入更多的失败点。更糟糕的是,现在不是查看按钮标记,你还必须在标记中的其他地方寻找添加单击事件的jQuery按钮选择器代码。这不仅增加了开发人员的工作量,而且引入了更多可能失败的代码。(因此,增加了开发人员的工作负荷和调试工作)。
看看你的jQuery选择器代码,你使用的是“*",而实际上对于jQuery,你使用的是“^”来忽略起始文本(所以^=“ends with”),而你使用的是“$”来选择起始文本。
所以,只需转储额外的jQuery选择器代码。
所以,我们有一个按钮,和这样的标记:

<input id="Button11" type="button" value="ajax test"
            onclick="TestFun();return false"
            />

        <script>

            function TestFun() {

                $.ajax({
                    type: "POST",
                    url: "AJPostTest.aspx/Hello",
                    data: {},
                    success: function (response) {

                        alert('return value = ' + response.d)
                    },
                    error: function (xhr, status, error) {
                        // Handle the error response
                        console.log(error, status, xhr);
                    }
                });
            }

        </script>

字符串
服务器方法是这样的:

[WebMethod] 
    public static string Hello()
    {
        return "Hello from server";
    }


在运行上面的命令之前,按f11键打开浏览器调试工具。
现在,当我点击上面时,控制台显示此错误:
x1c 0d1x的数据
好吧,这意味着我没有“$",这意味着我没有jQuery设置。
让我们将jquery添加到页面:
所以,我们现在有这个:

<script src="../Scripts/jquery-3.4.1.js"></script>

        <input id="Button11" type="button" value="ajax test"
            onclick="TestFun();return false"
            />

        <script>

            function TestFun() {

                $.ajax({
                    type: "POST",
                    url: "AJPostTest.aspx/Hello",
                    data: {},
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {

                        alert('return value = ' + response.d)
                    },
                    error: function (xhr, status, error) {
                        // Handle the error response
                        console.log(error, status, xhr);
                    }
                });
            }

        </script>


现在的结果是这样的:



所以,修复你的jQuery选择器,或者实际上删除它,并按照上面的方法用一个简单的按钮进行测试。(或者发布你现有的按钮标记)。
此外,如果将上述示例测试代码引入到现有页面中不起作用,请检查浏览器调试工具,确保jQuery正常工作。
下一个:
如果您的网站启用了友好URL,那么在大多数情况下,您需要编辑/更改重定向模式为关闭。
因此,检查您的网站,并在app_start下,打开RouteConfig.cs,并更改以下内容:

public static void RegisterRoutes(RouteCollection routes)
    {
        var settings = new FriendlyUrlSettings();
        settings.AutoRedirectMode = RedirectMode.Off;   <--- this to off
        routes.EnableFriendlyUrls(settings);
    }

相关问题