php ajax jquery melaksanakan klik untuk memuatkan lebih banyak content_jquery

Kami boleh menemui aplikasi sedemikian di beberapa tapak web Weibo. Senarai kandungan Weibo tidak menggunakan bar paging Sebaliknya, beberapa rekod dimuatkan pada satu masa dan dipaparkan pada halaman senarai daripada halaman senarai, dia boleh Klik "Lihat Lagi" untuk memuatkan lebih banyak rekod. Dalam artikel ini, saya akan memberitahu anda bagaimana untuk melaksanakan aplikasi ini menggunakan jQuery dan PHP.

Prinsip asas: Apabila halaman dimuatkan, jQuery meminta data dari latar belakang, dan PHP memaparkan rekod terkini pada halaman senarai dengan menanyakan pangkalan data Terdapat pautan "lebih" di bahagian bawah halaman senarai mencetuskan pautan, Hantar permintaan Ajax ke pelayan Program PHP latar belakang mendapat parameter permintaan dan bertindak balas. Ia memperoleh rekod yang sepadan dari pangkalan data dan mengembalikannya ke halaman depan dalam bentuk JSON halaman jQuery menghuraikan data JSON dan menambahkan data ke halaman senarai. Malah, ia adalah kesan paging Ajax.

Pertama sekali, kita perlu memperkenalkan perpustakaan jquery dan pemalam jquery.more.js telah merangkumkan banyak fungsi dan menyediakan fungsi konfigurasi parameter.

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.more.js"></script> 

Struktur xhtml adalah seperti berikut:

<div id="more"> 
   <div class="single_item"> 
      <div class="element_head"> 
        <div class="date"></div> 
        <div class="author"></div> 
      </div> 
      <div class="content"></div> 
   </div> 
   <a href="javascript:;" class="get_more">::点击加载更多内容::</a> 
</div> 

Perlu dinyatakan bahawa gaya single_item dan get_more berkaitan dengan pemalam jquery.more.js Anda juga boleh memilih nama kelas lain, tetapi anda mesti menulis kelas yang sepadan semasa mengkonfigurasi.

CSS

#more{margin:10px auto;width: 560px; border: 1px solid #999;}        
.single_item{padding: 20px; border-bottom: 1px dotted #d3d3d3;} 
.author{position: absolute; left: 0px; font-weight:bold; color:#39f} 
.date{position: absolute; right: 0px; color:#999} 
.content{line-height:20px; word-break: break-all;} 
.element_head{width: 100%; position: relative; height: 20px;} 
.get_more{margin:10px; text-align:center} 
.more_loader_spinner{width:20px; height:20px; margin:10px auto; background: url(loader.gif) 
 no-repeat;} 

CSS di atas disesuaikan dalam contoh ini Sudah tentu, anda boleh menyesuaikan gaya yang berbeza dalam projek sebenar. Ambil perhatian bahawa more_loader_spinner mentakrifkan memuatkan imej animasi.

jQuery

$(function(){ 
  $('#more').more({'address': 'data.php'}) 
}); 

Ia sangat mudah untuk digunakan Konfigurasikan alamat bahagian belakang: data.php untuk melihat cara data.php memproses data.

PHP

pautan data.php ke pangkalan data Contoh ini menggunakan jadual data yang sama seperti artikel di tapak ini.

require_once('connect.php'); 
 
$last = $_POST['last']; 
$amount = $_POST['amount']; 
 
$user = array('demo1','demo2','demo3','demo3','demo4'); 
$query=mysql_query("select * from say order by id desc limit $last,$amount"); 
while ($row=mysql_fetch_array($query)) { 
  $sayList[] = array( 
    'content'=>$row['content'], 
    'author'=>$user[$row['userid']], 
    'date'=>date('m-d H:i',$row['addtime']) 
   ); 
} 
echo json_encode($sayList); 

data.php menerima dua parameter yang diserahkan oleh halaman hadapan $_POST['last'] ialah bilangan rekod untuk dimulakan dan $_POST['amount'] ialah bilangan rekod yang dipaparkan pada satu masa memahaminya dengan melihat pernyataan SQL Sebenarnya, ia adalah Pernyataan yang digunakan dalam paging.

Kemudian keluarkan hasil pertanyaan dalam format JSON, dan tugas PHP selesai.

Akhir sekali, mari kita lihat pada konfigurasi parameter jquery.more.js.

'jumlah' : '10', //Bilangan rekod dipaparkan setiap kali
'address' : 'comments.php', //Minta alamat latar belakang
'format' : 'json', //Format penghantaran data
'template' : '.single_item', //html merekodkan atribut kelas DIV
'trigger' : '.get_more', //Atribut kelas yang mencetuskan pemuatan lebih banyak rekod
'scroll' : 'false', //Sama ada pemuatan pencetus skrol disokong
'offset' : '100', //Offset apabila menatal mencetuskan pemuatan

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.