1. Die Methode $.get
$.get() verwendet die GET-Methode, um asynchrone Anforderungen zu stellen.
$.get( url [, data] [, callback] )
Erklären Sie die Parameter dieser Funktion:
url: string type, Die Adresse der Ajax-Anfrage.
Daten: Optionaler Parameter, Objekttyp. Die an den Server gesendeten Schlüssel-/Wertdaten werden als QueryString an die Anforderungs-URL angehängt.
Rückruf: optionaler Parameter, Funktionstyp. Diese Funktion wird automatisch aufgerufen, wenn Ajax erfolgreich zurückkehrt.
Schreiben Sie abschließend ein Beispiel für $.get() als Referenz:
| |
| |
$.get( "submit.aspx",
{ id: '123', name: '青藤园', },
function(data,state){
//这里显示从服务器返回的数据
alert(data);
//这里显示返回的状态
alert(state); })
|
$.get( "submit.aspx", function(data,state){ warning(state })
|
2. $.post()
$.post()-Methode verwendet die POST-Methode um asynchrone Anfragen zu stellen. Die Syntaxstruktur ist:
$.post(url,[data],[callback],[ type])
Diese Methode ist ähnlich zu $.get(), außer dass es einen zusätzlichen Typparameter gibt, daher werden wir hier nur den Typparameter vorstellen. Weitere Informationen finden Sie unter $.get() oben.
Typ: Typ ist der angeforderte
Datentyp
, der HTML, XML, JSON usw. sein kann. Wenn wir diesen Parameter auf „JSON“ setzen, ist das zurückgegebene Format das JSON-Format . Wenn es nicht festgelegt ist, entspricht es dem von $.get() zurückgegebenen Format, bei dem es sich um eine Zeichenfolge handelt.
| |
$.post( "submit.aspx",
{ id: '123', name: '青藤园', },
function(data,state){
//这里显示从服务器返回的数据
alert(data);
//这里显示返回的状态
alert(state);
},
"json");
|
Schreiben Sie abschließend ein Beispiel für $.post() als Referenz:
| |
$.post( "submit.aspx", { id: '123', name: 'Ivy Garden', }, function(data,state) { warning(state); > }, "json"); |
3. $.getJSON()
$.getJSON() ist speziell für Ajax zum Abrufen von JSON-Daten eingerichtet und unterstützt domänenübergreifende Aufrufe . Das Syntaxformat ist:
getJSON(url,[data],[callback])
url: String-Typ, Sendeanforderungsadresse
data: OK Parameter auswählen, zu sendende Schlüssel-/Wertparameter, wie get, Post-Typ-Daten
Callback: Optionaler Parameter, wenn der Ladevorgang erfolgreich ist Callback-Funktion, genauso wie get, Post-Type-Callback
JSON ist ein ideales Datenübertragungsformat. Es lässt sich gut in JavaScript oder andere Hostsprachen integrieren und kann direkt von JS verwendet werden. Die Verwendung von JSON ist strukturell sinnvoller und sicherer als das direkte Senden „nackter“ Daten über GET und POST. Bei der getJSON()-Funktion von jQuery handelt es sich lediglich um eine vereinfachte Version der ajax()-Funktion mit festgelegten JSON-Parametern. Diese Funktion ist auch domänenübergreifend einsetzbar und hat gewisse Vorteile gegenüber get() und post(). Darüber hinaus kann diese Funktion das Programm die Rückruffunktion X ausführen lassen, indem die Anforderungs-URL im Format „myurl?callback=X“ geschrieben wird.
Tipp: Die Daten werden letztendlich über die Get-Methode hinter der URL gesendet. Dadurch wird festgelegt, dass die gesendete Datenmenge nicht zu groß sein darf, da sonst die URL zu lang ist und der Empfang fehlschlägt (Die Methode getJSON kann nicht per Post eingereicht werden.)
4. $.ajax()
$.ajax() ist ein gängiges Ajax-Paket in jquery. Sein Syntaxformat ist:
$.ajax(options)
wobei Optionen ein Objekttyp sind, der die spezifischen Parameter dieses Ajax-Aufrufs angibt
| |
$.ajax({
| |
$.ajax({
url: 'submit.aspx',
datatype: "json",
type: 'post',
success: function (e) {
//成功后回调
alert(e);
},
error: function(e){
//失败后回调
alert(e);
},
beforeSend: function(){
//发送请求前调用，可以放一些"正在加载"之类额话
alert("正在加载");
}})
|
url : 'submit.aspx',
Datentyp: "json",
Typ: 'post', Erfolg: Funktion (e) {
//Rückruf nach Erfolg Post Callback<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>Nach dem Login kopieren Alert(e); }, beforeSend: function(){ // Wird vor dem Senden aufgerufen Auf Anfrage können Sie einige „Loading“ und andere Wörter warning("Loading">}}) |
< eingeben /table><%@ page language="java" import="java.util.*,java.sql.*,org.json.*" pageEncoding="utf-8"%>
Nach dem Login kopieren
response.setHeader("Access-Control-Allow-Origin", "*");Nach dem Login kopieren
Front-End-Empfangsseite:Beachten Sie, dass das JQuery-Mobilpaket eingeführt werden sollte
Backend 2.jsp-Seite: (Haupt hier Es handelt sich um einen Test verschiedener Möglichkeiten für das Frontend, JSON-Daten zu empfangen, sodass das Backend nicht getrennt und sehr einfach ist) <%@ 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();
}
%>Nach dem Login kopieren
Die Wirkung des obigen Satzes ist: Der Wert von Access-Control-Allow-Origin kann sein Platzhalter *Wenn es * ist, können Sie Anfragen von jedem Quellursprung empfangen. Ohne diesen Satz ist kein Ergebnis möglich 🎜>Screenshot des Datenbankteils:
Das obige ist der detaillierte Inhalt vonVerwendung von $.get, $.post, $.getJSON und $.ajax in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
