jQuery学习笔记之 Ajax操作篇(一) - 数据加载_jquery
May 16, 2016 pm 04:43 PM加载 HTML
我们通常使用加载 HTML 的方法来加载 HTML 片段,并插入到指定位置,假设当前页面为:
<div></div> <button>load</button>
同目录下的 test.html 文件内容为:
<span>test</span>
我们可以使用 load 方法来加载 HTML,将其绑定到按钮的点击事件上:
$('button').click(function() { $('div').load('test.html'); });
点击按钮后:
加载 JSON
JSON 即 Javascript Object Notation,直译过来即 Javascript 对象表示法,因此它能很方便地表示和传输数据,它规定键和值都必须包含在双引号内,且函数为非法 JSON 值。
{ "name": "stephenlee", "sex": "male" }
将上述 JSON 数据保存在 test.json 文件内。我们可以使用 getJSON 方法加载 JSON 数据,同样将其绑定在按钮的点击事件上:
$('button').click(function() { $.getJSON('test.json'); });
由于 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); }) }); });
点击按钮后,我们来看下 console 内的输出:
这里的 each 函数的第一个参数可以接收数组或对象,第二个参数为值回调函数,将每次循环中数组或对象的当前索引和值做为参数。
加载 JS
有时候我们不希望在页面初次加载时就加载所有的 JS 文件,而是动态地根据需求来加载,假设当前目录下有一个 JS 文件,内容为一个简单的 alert:
$(function() { alert('test');// })
我们可以使用全局函数 getScript 来加载该文件,同样绑定到按钮的点击事件上:
$('button').click(function() { $.getScript('test.js'); });
点击按钮后,加载 test.js 文件,并成功触发 alert。
加载 XML
对 XML 的加载操作与 JSON 类似,因为 XML 文档的作用也是与数据存储相关,在同目录下创建 text.xml 文件,内容为:
<person> <name>stephenlee</name> <sex>male</sex> </person>
加载 XML 文档可以直接使用 get 方法,为什么看上去像一个默认方法,这个可以根据 AJAX 的全称看出端倪 - Asynchronous JavaScript And XML。
同样将其绑定在按钮点击事件上:
$('button').click(function() { $.get('test.xml', function(data) { console.log(data); }); });
查看 console 结果为:
这里需要注意,如果 XML 文档内的格式错误,虽然不会报错,但是将无法执行回调函数。

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel 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

Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax?

Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery?

Petua jQuery: Cepat ubah suai teks semua teg pada halaman

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

Gunakan jQuery untuk mengubah suai kandungan teks semua teg

Fahami peranan dan senario aplikasi eq dalam jQuery

PHP dan Ajax: Cara Meningkatkan Keselamatan Ajax

Ringkasan fungsi operasi fail yang biasa digunakan dalam PHP
