0

我正在尝试使用名为autoscroll的 jQuery 插件在我的网站上显示评论。但是，我正在努力使用 AJAX 从我的数据库中提取评论，并且template从未调用过该函数。

$(".Reviews").autobrowse({
    url: function (offset) {
        //return Healthimized.Services.ClientUserServices.LoadClientUserReviews(1, LoadCustomerToSelectOption, ErrorHandler, onTimeOut)
        $.ajax({
            type: "POST",
            url: 'Services/ClientUserServices.asmx/GetAllSpecialities',
            //data: parameters,
            contentType: "application/json; charset=utf-8",
            //data: { fromDate: new Date(), toDate: new Date(), clientUserId:1},
            //data: "{'fromDate':'" + startFrom + "','toDate':'" + endTo + "','clientUserId':'" + doctorId + "'}",
            dataType: "json",
            //data: 'fromDate=' + new Date() + '&toDate=' + new Date() + '&clientUserId='+1,
            success: function (msg) {
                return "http://twitter.com/status/user_timeline/ParisHilton.json?count=10&page=OFFSET&callback=?".replace(/OFFSET/, 1+Math.round(offset/10));
            },
            error: function (e) {
                $(divToBeWorkedOn).html("Unavailable");
            }
        });
    },
    template: function (response) {
        var markup='';
        for (var i=0; i<response.length; i++) {
            markup+='<div style="background:rgba(0, 0, 0, 0.1);margin: 2% 2% 2% 2%;border-radius: 0.5em 0.5em 0.5em 0.5em;"><table>';
            markup += '<tr><td>';
            markup += '<img src="' + response[i].user.profile_image_url + '" /></td>';
            markup += '<td style="margin-top:-15px">'+response[i].text+'</td>';
            markup += '</tr></table></div>';
        }
        return markup;
    },
    itemsReturned: function (response) { return response.length; },
    max: 100,
    loader: '<div class="loader"></div>',
    sensitivity: 100,
    finished: function () { $(this).append('<p style="text-align:center"><b>No More Reviews to show</b></p>') }
    });
});
4

1 回答 1

0

首先，您的代码看起来像是不连贯的代码片段的混合体。其次，该插件适用于 RESTful 服务，其中参数通过查询字符串发送，以调用 ASP.NET Web 服务方法，您必须通过 ajax 请求data对象传递参数。此外，ASP.NET 将 ajax 请求响应包装在 JSON 对象中，其中实际响应数据存储在d属性中。

基于所有这些事实，您需要稍微更改插件代码以将其与 ASP.NET Web 服务方法一起使用。为此，请更改这段插件代码：

if (options.postData)
{
    var data = null;
    if (typeof options.postData == "function")
    {
        data = options.postData();
    }
    else
    {
        data = options.postData;
    }

    jQuery.post(options.url(currentOffset), data, ajaxCallback, "json").error(options.onError);
}
else
{
    jQuery.getJSON(options.url(currentOffset), ajaxCallback).error(options.onError);
}

更改代码：

if (options.postData) {
    var data = null;
    if (typeof options.postData == "function") {
        data = options.postData(currentOffset);
    }
    else {
        data = options.postData;
    }

    jQuery.ajax({
        url: options.url(),
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: data,
        success: ajaxCallback,
        error: options.onError
    });
}
else {
    jQuery.getJSON(options.url(currentOffset), ajaxCallback).error(options.onError);
}

让我们考虑一下您的 Web 服务代码如下：

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class ClientUserServices : System.Web.Services.WebService
{
    [WebMethod]
    public string[] GetAllSpecialities(int index)
    {
        return Enumerable.Range(1, 20).Select(id => Guid.NewGuid().ToString()).ToArray();
    }
}

然后您可以使用GetAllSpecialities以下代码使用该方法：

<script type="text/javascript">
     $(function () {
          $("#Reviews").autobrowse({
               url : '<%= ResolveClientUrl("~/Services/ClientUserServices.asmx/GetAllSpecialities") %>',
               postData: function (index) {
                    return "{ 'index' :" + index + "}";
               },
               template: function (response) {
                    response = response.d;
                    var markup = '';
                    for (var i = 0; i < response.length; i++) {
                         markup += "<div>" + response[i] + "</div>";
                    }
                    return markup;
               },
               itemsReturned: function (response) {
                    return response.d.length;
               },
               offset: 0,
               max: 10000,
               useCache: true,
               expiration: 1,
               onError: function (error) {
               }
          });
     });
</script>

<div id="Reviews">
</div>
于 2012-09-17T09:08:19.413 回答