javascript - 从 aspx 页面调用代码隐藏方法的 AJAX 代码不起作用

Question

单击锚链接后，我想调用一个代码隐藏函数（它将一些 HTML 内容代码加载到页面中）。

代码隐藏：

public void loadNewPage(string id)
    {
        ltlContent.Text = getPageCenter(id);
    }

JS代码：

$('a').click(function (e) {
            e.preventDefault();
            var data = { userName: $(this).attr("id") };
            var dataVal = JSON.stringify(data);

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

HTML：

<a href="#" id="kontakt">Go to Kontakt</a>

我得到的只是#在 URL 后面添加的，并且没有调用代码隐藏函数。

Answer 1

尝试这个：

JavaScript：

$(document).ready(function(){

    $('a').click(function (e) {
         e.preventDefault();
         var data = { 'id': $(this).attr("id") };
         var dataVal = JSON.stringify(data);

         $.ajax({
                type: "POST",
                url: "Default.aspx/loadNewPage",
                contentType: "application/json; charset=utf-8",
                data: dataVal,
                dataType: "json",
                success: function (data) {
                    var htmlStr = data.d;
                    $('#ltlContent').html(htmlStr);
                }
         });
    });
});

C#代码隐藏：

using System.Web.Services;

[WebMethod()]
public static string loadNewPage(string id) {
       string result = getPageCenter(id);
       return result;
}

如果一切正常，那么只需在 jquery ajax 调用成功的任何地方注入 html 字符串

Answer 2

尝试这个：

在您的锚点中执行以下操作：

<a href="javascript:void(0)" id="kontakt">Go to Kontakt</a>

并将您的 ajax 脚本修改为：

$('a').click(function (e) {

     var data = { 'id': $(this).attr("id") };
     var dataVal = JSON.stringify(data);

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