jQuery與Ajax以及序列化_jquery-js教程-PHP中文網

首頁

web前端

js教程

jQuery與Ajax以及序列化_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:16 PM

關於AJAX

所謂Ajax，全名Asynchronous JavaScript and XML。（也就異步的JS和XML）

簡單點來講就是不刷新頁面來發送和獲取數據，然後更新頁面。

Ajax的優勢

•無需外掛程式支援
•優秀的使用者體驗
•提高web程式的效能
•減輕伺服器和頻寬的負擔

Ajax的不足

•瀏覽器相容不足
•破壞瀏覽器前進與後退按鈕的正常功能
•對搜尋引擎的支援不足
•開發與調試工具的缺乏

好吧，這些都是幾年前的不足。技術的發展很快，這些不足也會慢慢彌補，起碼現在調試Ajax並不難。

Ajax的核心是XMLHttpRequest對象，它是Ajax實現的關鍵。

傳統的實現Ajax的例子就不舉了，太蛋痛了，我都沒記，網路上一搜一大堆。

關於jQuery中的Ajax

$.ajax()方法是封裝了最原始的js的Ajax方式。

load(),$.get(),$.post()是封裝了$.ajax()得來

$.getScript()和$.getJSON()是進一步的封裝。

•load()方法 •用處：載入遠端HTML程式碼並插入DOM中，通常用於取得靜態的資料文件，結構為：load(url [,data] [,callback])。 •url為請求的位址
•data可選，為發動到伺服器的參數物件
•callback為回呼函數，請求不論成功或失敗都呼叫
•載入頁面的時候甚至可以在地址裡加上篩選

$("#resDiv").load("test.html .myClass");//这个div里只载入test.html页面里面 样式为myClass 的元素


//举一个完整的例子
$(function(){
$("#resDiv").load("text.php",{name:"troy",textInfo:"hello"},function(responseText,textStatus,XMLHttpRequest){
//responseText：请求返回的内容
//textStatus： 请求状态：success、error、notmodiffied、timeout 4种 
//XMLHttpRequest: XMLHttpRequest对象
});
});

登入後複製

•$.get()方法 •明顯的看到呼叫的方式不同，所以說這函數是jQuery的全域函數。而此前的方法和load()這種都是對jQuery物件進行操作
•$.get()方法使用GET方式來進行非同步請求，結構為：$.get(url [,data] [,callback] [,type]) •前三個參數就不說了，唯一不同的是callback只有請求成功才會呼叫
•type參數為伺服器端傳回內容的格式，包括xml,html,script,json,text和_default
•範例

$("#send").click(function()
$.get("get1.php"
,{
username:$("#username").val(),
content:$("#content").val()
}
,function(data,textStatus){
//data: 返回的内容，可以是XML文档、JSON文件、HTML片段
//textStatus: 请求状态：success、error、notmodiffied、timeout 4种
}
)
})

登入後複製

•$.post()方法 •它與get方法的玩法一樣，不過一個是get方式，一個是post方式。
•$.getScript()方法 •有的時候頁面初次載入沒必要取得所有的腳本，所以jQuery提供了getScript這種方法來直接載入js檔案。
•範例

$('#send').click(function(){
$.getScript('test.js',function(){
//do something 这个时候脚本已经加载了，不需要再对js文件进行处理
});
});

登入後複製

• $.getJSON()方法 •用來載入JSON文件，用法同上，只不過傳回的json資料而已

$('#send').click(function(){
$.getJSON("myurl",function(data){
var html="";
$.each(data,function(commentIndex，comment){
html+=commentIndex+":"+comment['username']+";";
})
alert(html);
})
});
//注意一下ecch这种玩法，同样是个全局函数。他的回调函数中，第一个参数为成员的索引，第二个为变量和内容

登入後複製

順便擴充一下，跨域存取的JSONP

$("#send").click(function(){
$.getJSON("http://www.某网站.com/services/getMyCmpJson&#63;tags=car&tagmode=any&format=json&jsoncall back=&#63;"
,function(data){
//某些操作
}
)
})

登入後複製

//JSONP是個非官方協議，採用json與

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1669

CakePHP 教程

1428

Laravel 教程

1329

PHP教程

1273

C# 教程

1256

Related knowledge

Python vs. JavaScript：學習曲線和易用性 Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

從C/C到JavaScript：所有工作方式 Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript和Web：核心功能和用例 Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

JavaScript在行動中：現實世界中的示例和項目 Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

了解JavaScript引擎：實施詳細信息 Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：社區，圖書館和資源 Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

Python vs. JavaScript：開發環境和工具 Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。