JQuery AJAX读取ASP.NET WebService泛型方法

这几天在研究JQuery和WebService，被泛型返回类型搞死了。查了很多资料做实验终于搞定了。网上很多垃圾文章的作者都不亲手实验就到处拼凑把东西发上来，太不负责了。下面我发的是100%可用的，经过亲手实验的代码。

首先在WebService上要注意一点，一定记得把[System.Web.Script.Services.ScriptService]这行取消注释，这样脚本才可以调用到WebService。如图：

我用来测试的是我网站的友情链接列表，其WebService方法如下：

[WebMethod]
public List<EdiBlog.Core.DataModel.FriendLink> GetFriendLinks()
{
    return new EdiBlog.Core.FriendLink().GetModelList();
}

经过测试，在浏览器中用GET访问是会爆掉的，所以我们用POST方法去调用。在默认的IIS和ASP.NET环境下，手动访问“SystemService.asmx?op=GetFriendLinks”然后点击Invoke按钮。会得到如下的结果，它是一个泛型的友情链接列表：

现在服务已经证明可用了，我们可以写JQuery脚本了。

JQuery方法：

$(document).ready(function () {

    $.ajax({
        type: "POST",
        url: "/API/SystemService.asmx/GetFriendLinks",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {

            var html = '';

            html += '<ul>';

            $(result.d).each(function () {
                html += "<li><a href='" + this["Url"] + "'>" + this["Title"] + "</a></li>";
            });

            html += '</ul>';

            jQuery('#result').append(html);
        },
        error: OnError
    });
});

function OnError(request, status, error)
{
    $("#result").html(request.statusText);
}

上面的脚本有几点要注意：

1. type一定要是POST

2. data = "{}"的意思是这个方法不需要参数，即参数为空

3. dataType 和 contentType 一定要为JSON

至于HTML代码，则很简单，只需要一个空的div就可以了，id为result：

<div id="result">
</div>

最后运行结果如下：

.NET and Azure Developer

JQuery AJAX读取ASP.NET WebService泛型方法

Comments