如何從Ajax調用中臨時加載數據？

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)和(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!');
                        }

                    }
                );
            }