ホームページ > 記事 > ウェブフロントエンド > jQuery での $.get、$.post、$.getJSON、$.ajax の使用法
jQuery での $.get、$.post、$.getJSON、$.ajax の使用法
- 巴扎黑オリジナル
- 2017-07-03 09:41:201239ブラウズ
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 サイトの他の関連記事を参照してください。