jQuery での $.get、$.post、$.getJSON、$.ajax の使用法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQuery での $.get、$.post、$.getJSON、$.ajax の使用法

巴扎黑

Jul 03, 2017 am 09:41 AM

javascriptjquery

1. $.get

$.get() メソッドは、GET メソッドを使用して非同期リクエストを作成します。その構文構造は次のとおりです。

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

この関数のパラメータを説明します:

url: 文字列タイプ、Ajax リクエストのアドレス。

data: オプションのパラメーター、オブジェクトタイプ、サーバーに送信されるキー/値データは、QueryString としてリクエスト URL に追加されます。

callback: オプションのパラメーター、関数タイプ。この関数は、ajax が正常に返されたときに自動的に呼び出されます。

最後に、参考のために $.get() の例を書きます:

$.get( "submit.aspx",

'Qingteng公園', },

' s ' s ' across through through through ' through ' s ' through ' ‐ ‐ ‐ ‐w‐, � 返されたステータスを表示します

alert(state); )

2. $.post()

$.post() メソッドは、POST メソッドを使用して非同期リクエストを行います。その構文構造は次のとおりです:

$.post(url,[data) ],[callback],[type])

このメソッドは $.get() に似ていますが、追加の type パラメーターがあるため、ここでは type パラメーターのみを紹介します。その他の情報については、を参照してください。上記の$.get()。

type: type はリクエストされたデータタイプで、html、xml、json などになります。このパラメータを json に設定すると、返される形式は json 形式になります。設定されていない場合は、 get() によって返される形式は同じで、どちらも文字列です。 firention参照のために$ .post（）の例を記述します。 s ' using using ' s ' through ' s ' ‐to ‐ ‐‐‐‐‐ and

"json");

3. $.getJSON()

$.getJSON() は json データを取得するために特別に設定されており、その構文形式は次のとおりです:

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

url: 文字列型、送信リクエストアドレス
data: オプションのパラメーター、送信する Key/value パラメーター、get と同じ、post 型 data
callback: オプションのパラメーター、ロード成功時コールバック関数、get および post 型のコールバックと同じ

JSON は理想的なデータ送信形式であり、JavaScript や他のホスト言語とうまく統合でき、JS で直接使用できます。 JSON を使用することは、従来の GET および POST を通じて「ヌード」データを直接送信するよりも構造的に合理的で安全です。 jQuery の getJSON() 関数に関しては、JSON パラメーターが設定された ajax() 関数の単純化されたバージョンにすぎません。この関数はドメイン間で使用することもでき、get() や post() に比べて特定の利点があります。さらに、この関数はリクエスト URL を「myurl?callback=X」の形式で記述することで、プログラムにコールバック関数 X を実行させることができます。

ヒント: データは最終的に URL の背後にある get メソッドを通じて送信されます。これにより、送信されるデータの量が多すぎてはいけないことが決まります。そうしないと、URL が長すぎて受信が失敗します (getJSON メソッドは使用できません)。 postメソッド）の）で送信されます。

4、$.ajax()

$.ajax() は、jquery の一般的な ajax パッケージです。その構文形式は次のとおりです:

$.ajax(options)

ここで、options はオブジェクト型です。、このAjax呼び出しの特定のパラメーターを指定します");

}})

さて、上記は jquery で ajax 呼び出しを実装するいくつかの方法です。次に、より直観的な私の新しい小さな例を投稿します。

フロントエンド受信ページ:

jqueryモバイルパッケージの導入に注意してください

<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 は

wildcard

にすることができます *

* の場合は、任意のソースオリジンからのリクエストを受信できます。この文がないと、結果は得られません。

<%@ 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 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

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のアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

See all articles