jQuery中$.get、$.post、$.getJSON和$.ajax的用法-js教程-PHP中文網

首頁

web前端

js教程

jQuery中$.get、$.post、$.getJSON和$.ajax的用法

巴扎黑

Jul 03, 2017 am 09:41 AM

javascriptjquery

1、$.get

$.get()方法使用GET方式來進行非同步請求，它的語法結構為：

$.get( url [, data] [, callback] )

#解釋這個函數的各個參數：

url：string類型， ajax請求的地址。

data：可選參數，object類型，發送到伺服器的key/value資料會作為QueryString附加到請求URL中。

callback：可選參數，function類型，當ajax返回成功時自動呼叫函數。

最後寫一個$.get()的實例供大家參考：

#	$.get( "submit.aspx", { id: 》 function(data,state){

##########################################################################> ## //這裡顯示從伺服器回傳的資料 ###### alert(data); alert(state); })## ###################2、$.post()########## ######$.post()方法使用POST方式來進行非同步請求，它的語法結構為：#########$.post(url,[data],[callback],[type])#########這個方法和$.get()用法差不多，唯獨多了一個type參數，那麼這裡就只介紹type參數吧，其他的參考上面$.get()的。 ######type：type為請求的###資料型別###，可以是html,xml,json等類型，如果我們設定這個參數為：json，那麼回傳的格式就是json格式的，如果沒有設置，就和$.get()返回的格式一樣，都是字串的。 ######最後寫一個$.post()的實例供大家參考：###### ################ ######### $.post( "submit.aspx",### { id: '123', function(data,state){ ### //這裡顯示以伺服器傳回的資料 ####### alert(data); ###### # alert(state); ###### }, ##### # "json");###############

3、$.getJSON()

$.getJSON()是專門為ajax取得json資料而設定的，並且支援跨域調用，其語法的格式為：

getJSON(url,[data],[callback])

url：string類型，傳送請求位址
data ：可選參數，待發送Key/value 參數，同get，post類型的data
callback ：可選參數，載入成功時回呼函數，同get，post類型的callback

#JSON 是一種理想的資料傳輸格式，它能夠很好的融合與JavaScript或其他宿主語言，並且可以被JS直接使用。使用JSON相比傳統的透過 GET、POST直接發送「裸體」數據，在結構上更為合理，也更為安全。至於jQuery的getJSON()函數，只是設定了JSON參數的 ajax()函數的一個簡化版本。這個函數也是可以跨域使用的，比起get()、post()有一定優勢。另外這個函數可以透過把請求url寫成"myurl?callback=X"這種格式，讓程式執行回呼函數X。

提示：資料最終還是透過url後面透過get方式發送資料出去的，這就決定了，發送的data資料量不能太多，否則造成url太長接收失敗（getJSON方式是不可能有post方式遞交的）。

4、$.ajax()

$.ajax()是jquery中通用的一個ajax封裝，其語法的格式為：

$.ajax(options)

其中options是一個object類型，它指明了本次ajax呼叫的具體參數，這裡我把最常用的幾個參數附上方

}})

$.ajax({

url: 'submit.aspx',

datatype: "json",

type: 'post',

success: function (e) {

//成功後回調

alert(e);

alert(e );

# beforeSend: function(){

//送出請求前呼叫，可以放一些正在載入"

alert("載入中");

#}})

#Oh

#a，以上就是為jquery實現了幾種，現在我把我最近新的一個小例子貼上來,這樣更直觀。

前台接收頁面:

注意要引入jquery mobile 套件

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title><script type ="text/javascript" src = "jquery-1.6.4.min.js"></script></head>
<script type = "text/javascript">
	$(function(){
		$("#button1").click(function(){
			//用getJSON方法获取后台传递过来的JSON对象数组			$.getJSON("http://10.65.9.181:8090/jq_test_server/2.jsp",function(data){
				//调用each方法进行数组遍历
				$.each(data,function(index,item){
					//alert(data);
		  			//alert(item.username);  依次打印所有的username
					//alert(item);
					//打印出遍历的username的最后一个,因为之前的username会被后者覆盖//打印zxy
		  			$("#button1").html(item.username);
		  		});
			});
		});
		$("#button2").click(function(){
			//用get方法获取后台传递过来的json字符串,注意是字符串			$.get("http://10.65.9.181:8090/jq_test_server/2.jsp",function(data){
				//alert(data);
				//将字符串转化为json对象
				data = JSON.parse(data);
				$("#button2").html(data[1].username);
				});
		});
		$("#button3").click(function(){
			//用post方法获取后台传递过来的json字符串,注意是字符串			$.post("http://10.65.9.181:8090/jq_test_server/2.jsp",function(data){
				//alert(data);
				//将字符串转化为json对象
				data = JSON.parse(data);
				$("#button3").html(data[1].username);
				});
		});
		$("#button4").click(function(){
			//采用ajax方式获取json字符串			$.ajax({
				type:"GET",
				url:"http://10.65.9.181:8090/jq_test_server/2.jsp",
				success:function(data){
					//强制转换为json对象
					data = JSON.parse(data);
					//打印的是对象数组里面的第一个值对应的username
					$("#button4").html(data[0].username);
				}
			});
		});
	});
</script>
<body>
<a id = "button1" href = "#">getJSON方法</a>
<a id = "button2" href = "#">get方法</a>
<a id = "button3" href = "#">post方法</a>
<a id = "button4" href = "#">ajax方法</a>
</body>
</html>

後台2.jsp頁面:(這裡主要是測試前台接收json資料的幾種方式，故後台沒有分離,很簡陋)

注意要引入org.json套件

<%@ page language="java" import="java.util.*,java.sql.*,org.json.*"	pageEncoding="utf-8"%>

response.setHeader("Access-Control-Allow-Origin", "*");

上面這句話的作用是:Access-Control-Allow-Origin 的值可以是

通配符### *######如果是* 的話，就可以接收來自任意source origin的請求,此時外部的任何js請求都被允許，缺少這句話則沒有結果.##########

<%@ page language="java" import="java.util.*,java.sql.*,org.json.*"
	pageEncoding="utf-8"%>
<%	response.setHeader("Access-Control-Allow-Origin", "*");//注意这句话控制js访问权限
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%
	String url = "jdbc:mysql://localhost:3306/jquery";
	String user = "root";
	String pass = "root";
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	try {
		Class.forName("com.mysql.jdbc.Driver");
		conn = DriverManager.getConnection(url, user, pass);
		String sql = "select uid,username,imgurl,age from test1";
		pstmt = conn.prepareStatement(sql);
		rs = pstmt.executeQuery();
		// json数组
		JSONArray array = new JSONArray();
		// 获取列数
		ResultSetMetaData metaData = rs.getMetaData();
		int columnCount = metaData.getColumnCount();
		// 遍历ResultSet中的每条数据
		while (rs.next()) {
			JSONObject jsonObj = new JSONObject();
			// 遍历每一列
			for (int i = 1; i <= columnCount; i++) {
				String columnName = metaData.getColumnLabel(i);
				String value = rs.getString(columnName);
				jsonObj.put(columnName, value);
			}
			array.put(jsonObj);
		}
		System.out
				.println("======================返回的是json对象转化成的字符串==================");
		System.out.println(array.toString());
		out.print(array.toString());
	} catch (Exception e) {
		e.printStackTrace();
	}
%>

###資料庫部分截圖:####### #######

以上是jQuery中$.get、$.post、$.getJSON和$.ajax的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。