jQuery digabungkan dengan AJAX untuk memuatkan data daripada pelayan apabila halaman scrolls_jquery

Pengenalan

Teks akan menunjukkan cara memuat turun data daripada pelayan apabila menatal bar skrol. Menggunakan teknologi AJAX untuk memuatkan data daripada pelayan boleh membantu meningkatkan prestasi mana-mana aplikasi web kerana apabila halaman dibuka, hanya satu skrin data dimuatkan daripada pelayan Apabila lebih banyak data diperlukan, bar skrol boleh ditatal dengan pengguna. Kemudian muatkannya dari sisi pelayan.
Latar belakang

Facebooklah yang mendorong saya menulis kod yang memuatkan data daripada pelayan apabila bar skrol menatal. Semasa menyemak imbas Facebook, saya terkejut melihat bahawa semasa saya menatal, data baru dari pelayan mula dimasukkan ke dalam data sedia ada. Kemudian, mengenai penggunaan C# untuk melaksanakan fungsi yang sama, saya mencari maklumat yang berkaitan di Internet, tetapi saya tidak menemui sebarang artikel atau blog tentang menggunakan C# untuk melaksanakan fungsi ini. Sudah tentu, terdapat beberapa artikel tentang pelaksanaan Java dan PHP. Selepas membaca artikel ini dengan teliti, saya mula menulis kod dalam c#. Memandangkan versi C# saya berjalan dengan jayanya, saya fikir saya akan berkongsinya, maka siaran ini.

Kod

Dengan hanya beberapa baris kod kami boleh memuatkan pada skrol. Apabila menatal halaman, WebMethod akan dipanggil oleh klien dan mengembalikan kandungan untuk dimasukkan ke dalam klien Pada masa yang sama, pada klien, acara skrol akan terikat kepada fungsi klien (document.ready This fungsi memuatkan data daripada pelayan . Mari kita bincangkan tentang kedua-dua kaedah bahagian pelayan dan bahagian klien ini secara terperinci di bawah.

Kaedah sisi pelayan: Kaedah ini digunakan untuk mendapatkan data daripada pangkalan data atau sumber data lain dan menjana rentetan HTML mengikut format kawalan di mana data akan dimasukkan. Di sini saya hanya menambah mesej dengan nombor urutan.

[WebMethod]

Salin kod Kod adalah seperti berikut:

rentetan statik awam GetDataFromServer()
{
String resp = rentetan.Kosong;
untuk(int i = 0; i <= 10; i )
{
resp = "<p><span>" kaunter
"</span> Kandungan ini dilampirkan secara dinamik "
"ke kandungan sedia ada semasa menatal.</p>" ;
}
Balas balas;
}

Jika anda ingin memuatkan data daripada pangkalan data, anda boleh mengubah suai kod seperti berikut:

[WebMethod]

Salin kod Kod adalah seperti berikut:

öffentliche statische Zeichenfolge GetDataFromServer()
    {
        DataSet ds = new DataSet();
 
        // Wert der Verbindungszeichenfolge hier festlegen
        string strConnectionString = ""; // Geben Sie hier Ihren Verbindungszeichenfolgenwert ein
        SqlConnection con = new SqlConnection(strConnectionString);
 
        // Den ausgewählten Befehlswert als ersten Parameter schreiben
        SqlCommand command = new SqlCommand("SELECT * FROM Person", con);
        SqlDataAdapter adp = new SqlDataAdapter(command);
int retVal = adp.Fill(ds);
 
        string resp = string.Empty;
for (int i = 1; i <= ds.Tables[0].Rows.Count; i )
        {
            string strComment = string.Empty;
if (ds.Tables != null)
            {
if (ds.Tables[0] != null)
                {
if (ds.Tables[0].Rows.Count > 0)
                    {
if (ds.Tables[0].Rows.Count >= i - 1)
                        {
if (ds.Tables[0].Rows[i - 1][0] != DBNull.Value)
                            {
                                strComment = ds.Tables[0].Rows[i - 1][0].ToString();
                            }
                        }
                    }
                }
            }
            resp = "<p><span>" counter "</span> " strComment "</p>";
        }
zurück bzw.
    }

客户端方法:在客户端,我使用了document.ready方法,并且把div的scroll事件绑定到了该方法上.我使用了两个div Verwenden Sie „mainDiv“, „wrapperDiv“, „mainDiv“ und „scroll“. Füge die WrapperDiv-Funktion hinzu.

$(document).ready(
function()
{
$contentLoadTriggered = false;
$("#mainDiv").scroll(
function()
{
if($("#mainDiv").scrollTop() >= ($("#wrapperDiv").height() -
  $("#mainDiv").height()) &&
  $contentLoadTriggered == false)
  $contentLoadTriggered == false)
{
$contentLoadTriggered = true;
$.ajax(
{
type: "POST",
url: "LoadOnScroll.aspx/GetDataFromServer",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (msg)
{
$("#wrapperDiv").append(msg.d);
$contentLoadTriggered = false;
},
error: function (x, e)
{
alert("The call to the server side failed. " +
x.responseText);
}
}
);
}
}
);
}
);

这里，为检查滚动条是否已经移动到了底部，使用了下面的条件判断，
 

if($("#mainDiv").scrollTop() >=
 ($("#wrapperDiv").height() - $("#mainDiv").height()) &&
  $contentLoadTriggered == false)

这个条件将判断滚动条是否已经到达了底部, 当它已经移动到了底部, 动态数据将从服务器Der Name des WrapperDiv wird angezeigt时执行.
 

success: function (msg)
{
$("#wrapperDiv").append(msg.d);
$contentLoadTriggered = false;
}

这里，你将注意到只有在用户移动滚动到了底部时，请求才会送到服务器端.

我粘贴了几个样图：
Ausgabe