使用 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]