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

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

巴扎黑

リリース： 2017-07-03 09:41:20

オリジナル

1210 人が閲覧しました

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