Question

伙计我的页面上有一个ajax调用，在向下滚动事件（延迟加载）时调用。

这是整个电话：

function callMoreData()
{ $.ajax( {
                    type: "GET",
                    url: "/api/values/getnotice",
                    dataType: "json",
                    crossDomain: true,
                    async: true,
                    cache: false,
                    success: function (data) {
                        updateData(data);
                    },
                    error: function (x, e) {
                        alert('problem while fetching records!');
                    } });}

function updateData(data) {
    updateData = function (data) { };
    $.each(data, function (index, value) {
        BindNotice(value);
    });
}

function BindNotice(values)
{
 ...appending some div here with values...
}

现在此调用返回所有数据并在第一个滚动事件中一次显示所有数据。我想要做的是，以两个为一组加载数据。例如，每个循环在第一次滚动时在索引0和1上执行，然后在第二次滚动索引2和3上执行处理，然后依此类推。我该怎么办呢？我对JS / AJAX的经验非常有限......

编辑：来自自定义图书馆的代码：

$(".mainwrap .innnerwrap").mCustomScrollbar({
    autoDraggerLength:true,
    autoHideScrollbar:true,
    scrollInertia:100,
    advanced:{
        updateOnBrowserResize: true,
        updateOnContentResize: true,
        autoScrollOnFocus: false
    },
     callbacks:{
            whileScrolling:function(){WhileScrolling();},
            onTotalScroll: function () {
            callMoreData();
        }

    }
});

WebApi代码：

[WebMethod]
[HttpGet]
public List<Notice> GetNotice()
{
    string con = ConfigurationManager.ConnectionStrings["conn"].ConnectionString;
    SqlConnection Connection = new SqlConnection(con);
    string Query = "uSP_GetAllNotice";
    SqlCommand cmd = new SqlCommand(Query, Connection);
    cmd.CommandType = CommandType.StoredProcedure;
    DataTable dt = new DataTable();
    Connection.Open();
    dt.Load(cmd.ExecuteReader());
    Connection.Close();
    List<Notice> objNoticeList = new List<Notice>();
    foreach (DataRow row in dt.Rows)
    {
        Notice objNotice = new Notice();
        objNotice.Subject = row["subject"].ToString();
        objNotice.Date = Convert.ToDateTime(row["IssueDate"]);
        objNotice.Department = row["Department"].ToString();
        objNotice.Body = row["Body"].ToString();
        objNotice.NoticeImage = row["NoticeImage"].ToString();
        objNotice.Icon = row["Icon"].ToString();
        objNoticeList.Add(objNotice);
    }
    return objNoticeList;
}

Answer 1

首先，你必须确保服务器端只提供你喜欢的mutch元素，所以这就像

[...]
type: "GET",
url: "/api/values/getnotice/" + start + '/' + amount,
dataType: "json",
[...]

start和amount必须在函数外部定义，在更高的范围内，因此ajax函数可以使用它。虽然数量或多或少是恒定的，但可以计算开始。一种选择是，在成功函数上增加它。另一个解决方案是，计算已经附加到DOM的div。

结果可能是：

var amount = 2;
var start = 0;

function callMoreData(){ 
    $.ajax( {
        type: "GET",
        url: "/api/values/getnotice/" + start + '/' + amount,
        dataType: "json",
        crossDomain: true,
        async: true,
        cache: false,
        success: function (data) {
            updateData(data);
            start += amount;
        },
        error: function (x, e) {
            alert('problem while fetching records!');
        } 
    });
}

我建议不要将它放在全局命名空间中，而是将它放在自己的命名空间中。

Answer 2

也许您可以使用分页参数一次将数据分成两个项目。让服务器处理如何将响应数据分成每页两个项目的工作。

$.ajax({
    type: "POST",
    url: "/api/values/getnotice",
    data: {
        'PageSize': pageSize, 
        'Page': page
    },
    type: "GET",
    dataType: "json",
    crossDomain: true,
    async: true,
    cache: false,
    success: function (data) {
        updateData(data);
    },
    error: function (x, e) {
        alert('problem while fetching records!');
    } 
});

Answer 3

制作一个全局变量，例如

Var time_scrolled = 0; //in the beginning

当您收到滚动下拉事件时，每个请求的索引都是(time_scrolled*2)和(time_scrolled*2+1)，那么您将time_scrolled增加1 time_scrolled++;

希望这能解决您的问题。

<强>编辑：完整的代码

    Var times_scrolled = 0; //in the beginning
    Var global_data = [];

        function callMoreData()
        { $.ajax( {
                            type: "GET",
                            url: "/api/values/getnotice",
                            dataType: "json",
                            crossDomain: true,
                            async: true,
                            cache: false,
                            success: function (data) {
                                global_data = data;
                            },
                            error: function (x, e) {
                                alert('problem while fetching records!');
                            } });}

    callMoreData(); //fetch data at the time of loading since it won't miss at first scroll
    function updateData(){
       var initial = times_scrolled*2;

            var final = initial+1;
            for(var i=initial;i<data.length && i<=final;i++)
            {
                BindNotice(global_data[i]);
            }
            times_scrolled++;

    }

        function BindNotice(values)
        {
         ...appending some div here with values...
        }


// modify custom library code to:

$(".mainwrap .innnerwrap").mCustomScrollbar({
    autoDraggerLength:true,
    autoHideScrollbar:true,
    scrollInertia:100,
    advanced:{
        updateOnBrowserResize: true,
        updateOnContentResize: true,
        autoScrollOnFocus: false
    },
     callbacks:{
            whileScrolling:function(){WhileScrolling();},
            onTotalScroll: function () {
            updateData();
        }

    }
});

Answer 4

这就是我解决问题的方法。这是我的ajax电话

function callMoreData() {
                var RoleCodes = $('#hiddenRoleCode').val();
                $.ajax(
                    {
                        type: "GET",
                        url: "/api/alert/getalerts?RoleCode=" + RoleCodes + "&LastAlertDate=" + formattedDate,
                        dataType: "json",
                        crossDomain: true,
                        async: true,
                        cache: false,
                        success: function(data) {
                            $.each(data.data, function (index, value) {
                                update();
                                BindAlert(value);
                            });
                        },
                        error: function(x, e) {
                            alert('There seems to be some problem while fetching records!');
                        }

                    }
                );
            }

如何从Ajax调用中断数据？

4 个答案: