使用jQuery Ajax和ASP.NET向下滾動頁面時加載其他數據

Question

我試圖在我的項目中應用帶字幕的功能，並決定嘗試一下它的工作原理。 但是在測試時，當我滾動到頁面底部時，它會顯示一個客戶端腳本錯誤，並顯示一條消息Undefined 。 我不知道自己在代碼中做錯了什么，也不知道如何使其工作。 我希望有人能幫助我。 下面是代碼：

直放站

<div id="dvCampaigns">
    <asp:Repeater ID="rptUsers" runat="server">
       <ItemTemplate>
           <table cellpadding="2" cellspacing="0" border="1" style="width: 200px; height: 100px;
               border: dashed 2px #04AFEF; background-color: #B0E2F5">
               <tr>
                  <td>
                      <b><u><span class="campaignname">
                      <%# Eval("CampaignName") %></span></u></b>
                  </td>
               </tr>
               <tr>
                   <td>
                       <b>Description: </b><span class="description">
                          <%# Eval("Description") %></span><br />
                          <b>ID: </b><span class="campaign-id">
                          <%# Eval("CampaignID") %></span><br />
                          <b>Date Created: </b><span class="datecreated">
                         <%# Eval("CreatedOn")%></span><br />
                   </td>
               </tr>
           </table>
           <br />
      </ItemTemplate>
   </asp:Repeater>
</div>
<div>
    <img id="loader" alt="" src="../Images/loading.gif" style="display: none" />
</div>

代碼隱藏

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            rptCampaigns.DataSource = GetUserData(1);
            rptCampaigns.DataBind();
        }
    }

    public static TList<POLLice.Entities.Campaigns> GetCampaignData(int pageIndex)
    {
        int totalData;
        var items = new CampaignsService().GetAll(pageIndex, 10, out totalData);
        return items;
    }

    [WebMethod]
    public static string GetCampaigns(int pageIndex)
    {
        var dataset = GetUserData(pageIndex).ToDataSet(true);
        return dataset.GetXml();
    }

jQuery腳本

    <script type="text/javascript">
        var pageIndex = 1;
        var pageCount;
        $(window).scroll(function() {
            if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                GetRecords();
            }
        });
        function GetRecords() {
            pageIndex++;
            if (pageIndex == 2 || pageIndex <= pageCount) {
                $("#loader").show();
                $.ajax({
                    type: "POST",
                    url: "UserProfile/Default.aspx/GetCampaigns",
                    data: '{pageIndex: ' + pageIndex + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function(response) {
                        alert(response.d);
                    },
                    error: function(response) {
                        alert(response.d);
                    }
                });
            }
        }
        function OnSuccess(response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
            var campaigns = xml.find("Campaigns");
            campaigns.each(function() {
                var campaign = $(this);
                var table = $("#dvCampaigns table").eq(0).clone(true);
                $(".campaignname", table).html(campaign.find("CampaignName").text());
                $(".description", table).html(campaign.find("Description").text());
                $(".campaign-id", table).html(campaign.find("CampaignID").text());
                $(".datecreated", table).html(campaign.find("CreatedOn").text());

                $("#dvCampaigns").append(table).append("<br />");
            });
            $("#loader").hide();
        }
    </script>

非常感謝。

Answer 1

在您的ajax中，您有以下行：

url: "UserProfile/Default.aspx/GetCampaigns",

您是否刪除了此帖子的完整路徑（包括http），還是在代碼中采用了這種方式？ 這需要Web方法的相對或絕對路徑。 同樣，在使用ajax調用Web方法時，您需要使用：

[ScriptMethod(ResponseFormat = ResponseFormat.Json)] //or whatever your return format is
[WebMethod]