Kandungan kotak beban secara dinamik menggunakan ajax

Tutorial ini menunjukkan membuat kotak halaman dinamik yang dimuatkan melalui AJAX, membolehkan Refresh Instant tanpa Reloads Halaman Penuh. Ia memanfaatkan JQuery dan JavaScript. Fikirkannya sebagai loader kotak kandungan gaya Facebook tersuai.

Konsep Utama:

• Ajax dan jQuery secara dinamik memuatkan dan menyegarkan semula kotak halaman tanpa memuat semula halaman lengkap, mencerminkan fungsi tapak seperti Facebook dan Twitter.
• Proses ini melibatkan kotak pemuatan selepas DOM siap, menggunakan fungsi AJAX untuk setiap kotak, memaparkan mesej pemuatan, dan menggunakan skrip sisi pelayan (mis., PHP) untuk mengembalikan HTML untuk setiap kotak. HTML ini kemudian dimasukkan ke dalam kotak yang sepadan di laman web.
• Dinamisme sistem berpunca daripada menggunakan atribut id setiap kotak untuk menghasilkan pembolehubah, yang kemudian dipadankan dengan skrip sisi pelayan. Kandungan mudah dimuat semula, dan kotak baru boleh ditambah tanpa CSS atau JavaScript tambahan.

Kelebihan Pendekatan Ajax ini:

masa beban halaman lebih cepat disebabkan oleh pemuatan kotak kandungan selepas DOM siap.
Kandungan menyegarkan dalam kotak tanpa muat semula halaman penuh.
sejajar dengan amalan pembangunan web moden yang digunakan oleh platform utama (Facebook, Twitter, dan lain -lain).
Menambah kotak baru tidak memerlukan CSS tambahan atau kod JavaScript.

Bagaimana ia berfungsi:

selepas beban halaman, jQuery memanggil fungsi Ajax untuk setiap kotak.
Mesej pemuatan dipaparkan.
skrip sisi pelayan (mis., PHP) Mengembalikan HTML untuk kotak.
Kandungan dimuatkan ke dalam kotak.
Kandungan mudah dimuat semula dengan melayang di atas kotak untuk mendedahkan imej penyegaran; Mengklik imej ini mencetuskan kandungan semula kandungan.

Fungsi dinamik:

Setiap kotak adalah

dengan atribut <div> yang unik. Unsur -unsur dalam ini <code>id Gunakan <div> yang sama. JQuery menggunakan ini <code>id untuk dipadankan dengan skrip sisi pelayan, menjadikan sistem dinamik kerana semua pembolehubah dijana berdasarkan kotak id. id

kod jQuery:

Kod ini berjalan selepas beban halaman, memulakan kawalan kotak dan peristiwa yang melampirkan.

jQuery(document).ready(function($) {
    $('.box').mouseover(function(){
        var dyn_var = "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" + this.id.replace("box","controls");
        $(dyn_var).show();
    });

    $('.box .controls').hide();

    $('.box').mouseout(function(){
        $('.box .controls').hide();
    });

    loadboxcontent('box-id1');
    loadboxcontent('box-id2');
    // ...add more box IDs as needed...
});

Fungsi ini memuatkan kandungan ke dalam kanak -kanak

berdasarkan pada <div> yang disediakan. Ia secara dinamik mewujudkan pembolehubah untuk mengendalikan objek. <code>box_id digunakan untuk mengenal pasti kedua -dua bekas box_id dan skrip PHP yang sepadan (mis., ). <div> <code>box_id.php

function loadboxcontent(box_id){
    if (box_id == '') { return false; }

    var loading_image="/images/loader.gif";
    var loading_text = ' Loading '+box_id.replace(/-/g," ")+'...';
    var script_path = "../php/";
    var box_container = document.getElementById(box_id);
    box_container.innerHTML = loading_text;

    var result = false;
    $.ajax({
      url: script_path+box_id+".php",
      type: 'POST',
      async: true,
      data: {blogs: 30},
      success: function(data) {
         result = true;
         document.getElementById(box_id).innerHTML = data;
      }
    });
    if (result == false) { document.getElementById(box_id).innerHTML = 'Could not refresh data, try refreshing the page'; }
    else {  alert("Content refreshed successfully!");   }
}

kod html (contoh):

<div id="box-id1" class="box">
  <h2 id="a-href-https-www-php-cn-link-ac-c-dd-dc-b-e-fe-c-e-b-New-Blogs-a"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">New Blogs</a></h2>
  <div id="controls-id1" class="controls">
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174119443682979.png" class="lazy" alt="Load Box Content Dynamically using AJAX "></a>
  </div>
</div>

kod CSS:

jQuery(document).ready(function($) {
    $('.box').mouseover(function(){
        var dyn_var = "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" + this.id.replace("box","controls");
        $(dyn_var).show();
    });

    $('.box .controls').hide();

    $('.box').mouseout(function(){
        $('.box .controls').hide();
    });

    loadboxcontent('box-id1');
    loadboxcontent('box-id2');
    // ...add more box IDs as needed...
});

Imej:

• loader.gif
• refresh.png

(bahagian Soalan Lazim dari input asal telah ditinggalkan kerana ia adalah seksyen yang berasingan dan tidak berkaitan dengan penggunaan Ajax umum.)