Rumah hujung hadapan web tutorial js jQuery学习笔记之 Ajax操作篇(一) - 数据加载_jquery

jQuery学习笔记之 Ajax操作篇(一) - 数据加载_jquery

May 16, 2016 pm 04:43 PM
ajax jquery Pemuatan data

加载 HTML

我们通常使用加载 HTML 的方法来加载 HTML 片段,并插入到指定位置,假设当前页面为:

<div></div>
<button>load</button>
Salin selepas log masuk

同目录下的 test.html 文件内容为:

<span>test</span>
Salin selepas log masuk

我们可以使用 load 方法来加载 HTML,将其绑定到按钮的点击事件上:

 $('button').click(function() {
  $('div').load('test.html');
 });
Salin selepas log masuk

点击按钮后:

加载 JSON

JSON 即 Javascript Object Notation,直译过来即 Javascript 对象表示法,因此它能很方便地表示和传输数据,它规定键和值都必须包含在双引号内,且函数为非法 JSON 值。

{
  "name": "stephenlee", 
  "sex": "male"
}
Salin selepas log masuk

将上述 JSON 数据保存在 test.json 文件内。我们可以使用 getJSON 方法加载 JSON 数据,同样将其绑定在按钮的点击事件上:

 $('button').click(function() {
  $.getJSON('test.json');
 });
Salin selepas log masuk

由于 getJSON 方法是作为 jQuery 的全局对象而定义的,因此这里需要使用 $ 来调用该方法。这里的 $ 指的是全局 jQuery 对象,而不是 $() 所指的个别 jQuery 对象。因此我们也称 getJSON 函数为全局函数。
但我们会发现上述代码只是获取了 JSON 数据,但看不出任何效果,这里我们可以使用 getJSON 方法的第二参数作为回调函数来测试效果:

 $('button').click(function() {
  $.getJSON('test.json', function(data) {
   console.log(data);
   $.each(data, function(index, content) {
    console.log(content);
   })
  });
 });
Salin selepas log masuk

点击按钮后,我们来看下 console 内的输出:

这里的 each 函数的第一个参数可以接收数组或对象,第二个参数为值回调函数,将每次循环中数组或对象的当前索引和值做为参数。

加载 JS

有时候我们不希望在页面初次加载时就加载所有的 JS 文件,而是动态地根据需求来加载,假设当前目录下有一个 JS 文件,内容为一个简单的 alert:

$(function() {
 alert('test');//
})
Salin selepas log masuk

我们可以使用全局函数 getScript 来加载该文件,同样绑定到按钮的点击事件上:

 $('button').click(function() {
  $.getScript('test.js');
 });
Salin selepas log masuk

点击按钮后,加载 test.js 文件,并成功触发 alert。

加载 XML

对 XML 的加载操作与 JSON 类似,因为 XML 文档的作用也是与数据存储相关,在同目录下创建 text.xml 文件,内容为:

<person>
<name>stephenlee</name>
<sex>male</sex>
</person>
Salin selepas log masuk

加载 XML 文档可以直接使用 get 方法,为什么看上去像一个默认方法,这个可以根据 AJAX 的全称看出端倪 - Asynchronous JavaScript And XML。
同样将其绑定在按钮点击事件上:

 $('button').click(function() {
  $.get('test.xml', function(data) {
    console.log(data);
  });
 });
Salin selepas log masuk

查看 console 结果为:

这里需要注意,如果 XML 文档内的格式错误,虽然不会报错,但是将无法执行回调函数。

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax? Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax? Mar 09, 2024 pm 05:36 PM

Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax?

Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Feb 28, 2024 pm 03:12 PM

Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery?

Petua jQuery: Cepat ubah suai teks semua teg pada halaman Petua jQuery: Cepat ubah suai teks semua teg pada halaman Feb 28, 2024 pm 09:06 PM

Petua jQuery: Cepat ubah suai teks semua teg pada halaman

PHP lwn. Ajax: Penyelesaian untuk mencipta kandungan yang dimuatkan secara dinamik PHP lwn. Ajax: Penyelesaian untuk mencipta kandungan yang dimuatkan secara dinamik Jun 06, 2024 pm 01:12 PM

PHP lwn. Ajax: Penyelesaian untuk mencipta kandungan yang dimuatkan secara dinamik

Gunakan jQuery untuk mengubah suai kandungan teks semua teg Gunakan jQuery untuk mengubah suai kandungan teks semua teg Feb 28, 2024 pm 05:42 PM

Gunakan jQuery untuk mengubah suai kandungan teks semua teg

Fahami peranan dan senario aplikasi eq dalam jQuery Fahami peranan dan senario aplikasi eq dalam jQuery Feb 28, 2024 pm 01:15 PM

Fahami peranan dan senario aplikasi eq dalam jQuery

PHP dan Ajax: Cara Meningkatkan Keselamatan Ajax PHP dan Ajax: Cara Meningkatkan Keselamatan Ajax Jun 01, 2024 am 09:34 AM

PHP dan Ajax: Cara Meningkatkan Keselamatan Ajax

Ringkasan fungsi operasi fail yang biasa digunakan dalam PHP Ringkasan fungsi operasi fail yang biasa digunakan dalam PHP Apr 03, 2024 pm 02:52 PM

Ringkasan fungsi operasi fail yang biasa digunakan dalam PHP

See all articles