jquery的ajax的資料載入詳解
ajax現在的應用非常的廣發,當然它的優勢也是非常的突出的,它可以再不重新整理頁面的情況下從可以從伺服器讀取資料,這樣可以有效的節省了網頁的下載內容,對使用者來說也是非常任性話的。
載入HTML:
通常使用載入HTML的方法來載入HTML片段,並插入到指定位置。
當前頁面的程式碼為:
[HTML] 純文字檢視 複製程式碼<div></div> <button>load</button>
同目錄下的test.html檔案內容為:
[HTML] 純文字檢視 複製程式碼<span>test</span>
可以使用 load 方法來載入 HTML,將其繫結到按鈕的點選事件上:
[JavaScript] 純文字檢視 複製程式碼$('button').click(function() { $('div').load('test.html'); });
點選按鈕後:
載入JSON:
JSON即Javascript Object Notation,直譯過來即Javascript物件表示法,因此它能很方便地表示和傳輸資料,它規定鍵和值都必須包含在雙引號內,且函式為非法JSON值。
[JavaScript] 純文字檢視 複製程式碼{ "name": "stephenlee", "sex": "male" }
將上述JSON資料儲存在test.json 檔案內。我們可以使用getJSON方法載入JSON資料,同樣將其繫結在按鈕的點選事件上:
[JavaScript] 純文字檢視 複製程式碼$('button').click(function() { $.getJSON('test.json'); });
由於getJSON方法是作為jQuery的全域性物件而定義的,因此這裡需要使用 $ 來呼叫該方法。這裡的 $ 指的是全域性jQuery物件,而不是$()所指的個別 jQuery物件。因此我們也稱getJSON函式為全域性函式。
但我們會發現上述程式碼只是獲取了JSON資料,但看不出任何效果,這裡我們可以使用getJSON方法的第二引數作為回撥函式來測試效果:
[JavaScript] 純文字檢視 複製程式碼$('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:
[JavaScript] 純文字檢視 複製程式碼$(function() { alert('test'); })
可以使用全域性函式getScript 來載入該檔案,同樣繫結到按鈕的點選事件上:
[JavaScript] 純文字檢視 複製程式碼$('button').click(function() { $.getScript('test.js'); });
點選按鈕後,載入 test.js檔案,併成功觸發alert。
載入XML:
對XML的載入操作與JSON類似,因為 XML 文件的作用也是與資料儲存相關,在同目錄下建立text.xml 檔案,內容為 :
[XML] 純文字檢視 複製程式碼<person> <name>stephenlee</name> <sex>male</sex> </person>
載入XML文件可以直接使用get方法,為什麼看上去像一個預設方法,這個可以根據 AJAX 的全稱看出端倪 - Asynchronous JavaScript And XML。
同樣將其繫結在按鈕點選事件上:
[JavaScript] 純文字檢視 複製程式碼$('button').click(function() { $.get('test.xml', function(data) { console.log(data); }); });
檢視console結果為:
相關文章
- JQuery中$.ajax()方法引數詳解jQuery
- jQuery、ajax新增Json資料jQueryJSON
- php原生上拉載入,點選載入更多(jQuery,ajax,mysql)PHPjQueryMySql
- React 中用jQuery的ajax 和 axios請求資料ReactjQueryiOS
- Ajax程式碼執行前應該先載入jQueryjQuery
- 使用jQuery的$.ajax()向MVC控制器Post資料jQueryMVC
- 基於jQuery的AjaxjQuery
- jQuery對Ajax的支援jQuery
- 深入瞭解jquery中的ajax方法引數jQuery
- jQuery入門(五)Ajax和jsonjQueryJSON
- jQuery 的語法詳解jQuery
- jQuery - AJAXjQuery
- jQuery AjaxjQuery
- axios,Ajax,jQuery ajax,axios和fetch的區別iOSjQuery
- Jquery Datatables (2) 動態載入資料型別jQuery資料型別
- 解決React通過ajax載入資料更新頁面不加判斷會報錯的問題React
- Jquery 和 Ajax的 使用方法jQuery
- PHP+Ajax點選載入更多列表資料例項PHP
- 三-類的載入過程詳解
- JQuery中ajax的使用與快取問題的解決方法jQuery快取
- jQuery Ajax 跨域前端實現登入jQuery跨域前端
- jQuery AJAX 方法jQuery
- jQuery.ajaxjQuery
- ajax +jquery 基本jQuery
- jQuery中的Deferred詳解和使用jQuery
- jquery寫的ajax分頁外掛jQuery
- js-ajax詳解JS
- ajax 引數詳解
- laravel中ajax 非同步載入資料,選擇對應的學校對應的專業Laravel非同步
- 前後端資料互動(二)——原生 ajax 請求詳解後端
- Ajax入門以及Axios的詳細使用(含Promise)iOSPromise
- jQuery AJAX 簡介jQuery
- jQuery – AJAX load() 方法jQuery
- OpenGL 模型載入詳解模型
- jQuery中的Deferred-詳解和使用jQuery
- 基於jQuery的三種AJAX請求jQuery
- Jquery ajax載入等待執行結束再繼續執行下面程式碼操作jQuery
- Java類載入器詳解Java
- 面試之jquery中的ajax方法引數面試jQuery