jQuery+ajax实现局部刷新
在项目中，经常会用到ajax，比如实现局部刷新，比如需要前后端交互等，这里呢分享局部刷新的两种方法，主要用的是ajax里面的.load()。
第一种：
当某几个页面都有相同的头部、导航、底部的时候，点击导航链接可以在几个页面中切换，此时想要的效果是点击链接后只切换内容部分，其他不再重新加载。上代码。
jq-load.html：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>ajax局部刷新</title> 5 </head> 6 <body> 7 8 <header> 9 <nav>10 <a href="jq-load.html" class="current">首页</a>11 <a href="jq-load2.html">新闻资讯</a>12 <a href="jq-load3.html">用户中心</a>13 </nav>14 </header>15 16 <section id="content">17 <div id="container">18 首页的内容19 </div>20 </section>21 22 <script src="js/jquery-1.11.0.min.js?1.1.11"></script>23 <script src="js/jq-load.js?1.1.11"></script>24 25 </body>26 </html>
注：jq-load2.html、jq-load3.html与jq-load.html代码基本一致，只在#container的div里展示的内容不一样。
jq-load.js：
1 $('nav a').on('click', function(e) {
2 e.preventDefault(); // 阻止链接跳转 3 var url = this.href; // 保存点击的地址 4 5 $('nav a.current').removeClass('current');
6 $(this).addClass('current');
7 8 $('#container').remove();
9 $('#content').load(url + ' #container').fadeIn('slow'); // 加载新内容,url地址与该地址下的选择器之间要有空格,表示该url下的#container10 });注：此种方法用到了一些html5里面的新标记，在js中创建它们不再赘述。
第二种：
如果网页的左侧有一个列表，点击列表使右侧的内容进行切换，如果右侧的内容过多，不适合做选项卡，这时候用.load()局部刷新最好不过了。上代码。
user.html：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>个人中心</title> 5 <meta charset="utf-8"> 6 <script src="js/jquery-1.11.0.min.js?1.1.11"></script> 7 <script src="js/user.js?1.1.11"></script> 8 </head> 9 <body>10 11 <div class="userWrap">17 <ul class="userMenu">18 <li class="current" data-id="center">用户中心</li>19 <li data-id="account">账户信息</li>20 <li data-id="trade">交易记录</li>21 <li data-id="info">消息中心</li>22 </ul>23 <div id="content"></div>25 </div>26 27 </body>28 </html>
user.js：
$(".userMenu").on("click", "li", sId = $().data("id"); window.location.hash = sId; sId = "#center": pathn = "user_center.html"; i = 0; "#account": pathn = "user_account.html"; i = 1; "#trade": pathn = "user_trade.html"; i = 2; "#info": pathn = "user_info.html"; i = 3; : pathn = "user_center.html"; i = 0; "#content").load(pathn); $(".userMenu li").eq(i).addClass("current").siblings().removeClass("current"); sId =user_center.html：
<div>用户中心 ……</div>
注：其他user_xxx.html的页面也是列表相对应的内容，此处不再赘述。
总结：
以上两种方法原理是一样的，通过.load()重新加载页面中的某一部分，需注意，ajax需要在服务器环境下运行。通过对比，可发现第一种比较简单，第二种稍复杂些，不过个人推荐第二种，第一种主要是举个例子，看.load()是怎么来用的，其实它在用户体验方面稍逊一筹，比如点击的时候地址栏里地址不变，使前进、后退失效，这个可以到后面再实现。而第二种的话运用比较灵活，巧妙的借助data-*的自定义属性来存储数据，点击的时候修改锚点，因为地址有变，所以刷新的时候仍然会保持当前的页面内容而不是切换到第一个。
Atas ialah kandungan terperinci jQuery+ajax实现局部刷新. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1386
52
6 Cara untuk Muat Semula Halaman Web pada iPhone
Feb 05, 2024 pm 02:00 PM
Apabila anda menyemak imbas web pada iPhone anda, kandungan yang dimuatkan disimpan buat sementara waktu selagi apl penyemak imbas kekal terbuka. Walau bagaimanapun, tapak web mengemas kini kandungan dengan kerap, jadi menyegarkan halaman adalah cara yang berkesan untuk mengosongkan data lama dan melihat kandungan yang diterbitkan terkini. Dengan cara ini, anda sentiasa mendapat maklumat dan pengalaman terkini. Jika anda ingin memuat semula halaman pada iPhone, siaran berikut akan menerangkan kepada anda semua kaedah. Cara Muat Semula Halaman Web pada Safari [4 Kaedah] Terdapat beberapa kaedah untuk memuat semula halaman yang anda lihat pada Apl Safari pada iPhone. Kaedah 1: Gunakan Butang Muat Semula Cara paling mudah untuk memuat semula halaman yang telah anda buka di Safari ialah menggunakan pilihan Muat Semula pada bar tab penyemak imbas anda. Jika Safa
Kunci muat semula F5 tidak berfungsi dalam Windows 11
Mar 14, 2024 pm 01:01 PM
Adakah kunci F5 tidak berfungsi dengan betul pada PC Windows 11/10 anda? Kekunci F5 biasanya digunakan untuk menyegarkan desktop atau penjelajah atau memuat semula halaman web. Walau bagaimanapun, sesetengah pembaca kami telah melaporkan bahawa kekunci F5 sedang menyegarkan komputer mereka dan tidak berfungsi dengan betul. Bagaimana untuk mendayakan penyegaran F5 dalam Windows 11? Untuk menyegarkan semula PC Windows anda, hanya tekan kekunci F5. Pada sesetengah komputer riba atau desktop, anda mungkin perlu menekan kombinasi kekunci Fn+F5 untuk menyelesaikan operasi muat semula. Mengapa penyegaran F5 tidak berfungsi? Jika menekan kekunci F5 gagal menyegarkan semula komputer anda atau anda mengalami masalah pada Windows 11/10, ia mungkin disebabkan oleh kekunci fungsi yang dikunci. Punca lain yang berpotensi termasuk papan kekunci atau kekunci F5
Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei?
Mar 24, 2024 am 11:27 AM
Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Dengan kebangkitan media sosial, WeChat telah menjadi salah satu alat komunikasi yang sangat diperlukan dalam kehidupan seharian orang ramai. Walau bagaimanapun, ramai orang mungkin menghadapi masalah: log masuk ke beberapa akaun WeChat pada masa yang sama pada telefon mudah alih yang sama. Bagi pengguna telefon mudah alih Huawei, tidak sukar untuk mencapai log masuk WeChat dwi Artikel ini akan memperkenalkan cara mencapai log masuk WeChat dwi pada telefon mudah alih Huawei. Pertama sekali, sistem EMUI yang disertakan dengan telefon mudah alih Huawei menyediakan fungsi yang sangat mudah - pembukaan dua aplikasi. Melalui fungsi pembukaan dwi aplikasi, pengguna boleh serentak
Gunakan Java untuk menulis kod untuk melaksanakan animasi cinta
Dec 23, 2023 pm 12:09 PM
Menyedari kesan animasi cinta melalui kod Java Dalam bidang pengaturcaraan, kesan animasi adalah sangat biasa dan popular. Pelbagai kesan animasi boleh dicapai melalui kod Java, salah satunya ialah kesan animasi jantung. Artikel ini akan memperkenalkan cara menggunakan kod Java untuk mencapai kesan ini dan memberikan contoh kod khusus. Kunci untuk merealisasikan kesan animasi jantung ialah melukis corak berbentuk hati dan mencapai kesan animasi dengan menukar kedudukan dan warna bentuk jantung. Berikut ialah kod untuk contoh mudah: importjavax.swing.
Panduan Pengaturcaraan PHP: Kaedah untuk Melaksanakan Jujukan Fibonacci
Mar 20, 2024 pm 04:54 PM
Bahasa pengaturcaraan PHP ialah alat yang berkuasa untuk pembangunan web, yang mampu menyokong pelbagai logik dan algoritma pengaturcaraan yang berbeza. Antaranya, melaksanakan jujukan Fibonacci adalah masalah pengaturcaraan biasa dan klasik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan bahasa pengaturcaraan PHP untuk melaksanakan jujukan Fibonacci, dan melampirkan contoh kod tertentu. Jujukan Fibonacci ialah jujukan matematik yang ditakrifkan seperti berikut: unsur pertama dan kedua bagi jujukan ialah 1, dan bermula dari unsur ketiga, nilai setiap unsur adalah sama dengan jumlah dua unsur sebelumnya. Beberapa elemen pertama urutan
Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei
Mar 24, 2024 pm 06:03 PM
Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Dengan populariti perisian sosial dan penekanan yang semakin meningkat terhadap privasi dan keselamatan orang ramai, fungsi klon WeChat telah beransur-ansur menjadi tumpuan perhatian. Fungsi klon WeChat boleh membantu pengguna log masuk ke berbilang akaun WeChat pada telefon mudah alih yang sama pada masa yang sama, menjadikannya lebih mudah untuk diurus dan digunakan. Tidak sukar untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Anda hanya perlu mengikuti langkah berikut. Langkah 1: Pastikan versi sistem telefon mudah alih dan versi WeChat memenuhi keperluan Pertama, pastikan versi sistem telefon mudah alih Huawei anda telah dikemas kini kepada versi terkini, serta Apl WeChat.
Bagaimana untuk memuat semula halaman web dengan cepat?
Feb 18, 2024 pm 01:14 PM
Penyegaran halaman adalah perkara biasa dalam penggunaan rangkaian harian kami Apabila kami melawat halaman web, kadangkala kami menghadapi beberapa masalah, seperti halaman web tidak dimuatkan atau dipaparkan secara tidak normal, dsb. Pada masa ini, kami biasanya memilih untuk memuat semula halaman untuk menyelesaikan masalah, jadi bagaimana untuk memuat semula halaman dengan cepat? Mari kita bincangkan kekunci pintasan untuk muat semula halaman. Kekunci pintasan muat semula halaman ialah kaedah untuk memuat semula halaman web semasa dengan pantas melalui operasi papan kekunci. Dalam sistem pengendalian dan penyemak imbas yang berbeza, kekunci pintasan untuk muat semula halaman mungkin berbeza. Di bawah ini kami menggunakan W biasa
Kuasai cara Golang mendayakan kemungkinan pembangunan permainan
Mar 16, 2024 pm 12:57 PM
Dalam bidang pembangunan perisian hari ini, Golang (bahasa Go), sebagai bahasa pengaturcaraan yang cekap, ringkas dan sangat bersesuaian, semakin digemari oleh pembangun. Perpustakaan standardnya yang kaya dan ciri-ciri konkurensi yang cekap menjadikannya pilihan berprofil tinggi dalam bidang pembangunan permainan. Artikel ini akan meneroka cara menggunakan Golang untuk pembangunan permainan dan menunjukkan kemungkinan besarnya melalui contoh kod tertentu. 1. Kelebihan Golang dalam pembangunan permainan Sebagai bahasa yang ditaip secara statik, Golang digunakan dalam membina sistem permainan berskala besar.
