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

首頁

web前端

js教程

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

巴扎黑

Jul 03, 2017 am 09:41 AM

javascript jquery

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

熱AI工具

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

記事本++7.3.1

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

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

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

熱門話題

gmail信箱登陸入口在哪裡

7488

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

jQuery引用方法詳解：快速上手指南 Feb 27, 2024 pm 06:45 PM

jQuery引用方法詳解：快速上手指南jQuery是一個受歡迎的JavaScript庫，被廣泛用於網站開發中，它簡化了JavaScript編程，並為開發者提供了豐富的功能和特性。本文將詳細介紹jQuery的引用方法，並提供具體的程式碼範例，幫助讀者快速上手。引入jQuery首先，我們需要在HTML檔案中引入jQuery函式庫。可以透過CDN連結的方式引入，也可以下載

jQuery中如何使用PUT請求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u

jQuery如何移除元素的height屬性？ Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height屬性？在前端開發中，經常會遇到需要操作元素的高度屬性的需求。有時候，我們可能需要動態改變元素的高度，而有時候又需要移除元素的高度屬性。本文將介紹如何使用jQuery來移除元素的高度屬性，並提供具體的程式碼範例。在使用jQuery操作高度屬性之前，我們首先需要了解CSS中的height屬性。 height屬性用於設定元素的高度

jQuery小技巧：快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：&lt

使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：

如何判斷jQuery元素是否具有特定屬性？ Feb 29, 2024 am 09:03 AM

如何判斷jQuery元素是否具有特定屬性？在使用jQuery操作DOM元素時，常會遇到需要判斷元素是否具有某個特定屬性的情況。在這種情況下，我們可以藉助jQuery提供的方法來輕鬆實現這項功能。以下將介紹兩種常用的方法來判斷一個jQuery元素是否具有特定屬性，並附上具體的程式碼範例。方法一：使用attr()方法和typeof運算子//判斷元素是否具有特定屬

了解jQuery中eq的作用及應用場景 Feb 28, 2024 pm 01:15 PM

jQuery是一種流行的JavaScript庫，被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中，eq()方法是用來選擇指定索引位置的元素的方法，具體使用方法和應用場景如下。在jQuery中，eq()方法選擇指定索引位置的元素。索引位置從0開始計數，即第一個元素的索引是0，第二個元素的索引是1，依此類推。 eq()方法的語法如下：$("s

PHP常用的檔案操作函數總結 Apr 03, 2024 pm 02:52 PM

目錄1：basename()2：copy()3：dirname()4：disk_free_space()5：disk_total_space()6：file_exists()7：file_get_contents()8：file_put_contents()9：filesize()10：filetype( )11：glob()12：is_dir()13：is_writable()14：mkdir()15：move_uploaded_file()16：parse_ini_file()17：

See all articles

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

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題