Zusammenfassung der Schlüsselpunkte
Eintritt in das Jahr 2013… Die Art und Weise, wie wir die Funktion jQuery.ajax () verwenden, hat sich in den neuesten Versionen geändert. In diesem Sinne und den älteren Beispielen, die etwas veraltet sind, habe ich 5 neue jQuery.Ajax () Beispiele (JQuery 1.9) geschrieben, um zu zeigen, wie AJAX mit neueren Versionen von JQuery 1.9.x und 2.0 verwendet werden kann. Neue Methoden haben einige Vorteile gegenüber alten Methoden.
Ich werde versuchen, diesen Beitrag mit AJAX -Code -Snippets als Referenz auf dem Laufenden zu halten. Wie immer sind Kommentare willkommen.
Einige schnelle Erinnerungen für Lernende: - Die Methode .Done () ersetzt die veraltete Methode jqxhr.success (). - Die .fail () -Methode ersetzt die veraltete .Eror () -Methode. - Die .Always () -Methode ersetzt die veraltete .Complete () -Methode.
jQuery 1.9 AJAX Beispiel 1 - Abonnieren Sie den Newsletter
Dieses Beispiel zeigt die grundlegende AJAX -Anfrage, um einen Newsletter zum Senden von Namen und E -Mails an Backend -Skripte zu abonnieren.
var subscribeRequest = $.ajax({
type: "POST",
url: "subscribe.php",
data: { subscriberName: $('#name').val(), emailAddress: $('#email').val() }
});
subscribeRequest.done(function(msg) {
alert( "您已成功订阅我们的邮件列表。" );
});
subscribeRequest.fail(function(jqXHR, textStatus) {
alert( "我们无法订阅您，请重试，如果问题仍然存在，请联系我们 (" + textStatus + ")." );
});JQuery 1.9 AJAX Beispiel 2 - Timeout anfordern
Dieses Beispiel zeigt, wie man Fehler und Fehler auffängt, z. B. Zeitüberschreitungen für AJAX -Anfragen. & gt; Das Timeout beginnt, wenn der $ .ajax -Anruf ausgestellt wird. Allein in Firefox 3.0 können Skripte und JSONP -Anfragen durch Timeout nicht abgesagt werden.
var newDataRequest = $.ajax({
url: "getNewData.php",
timeout: 30000, // 30 秒后超时
data: { timestamp: new Date().getTime() }
});
newDataRequest.done(function(data) {
console.log(data);
});
newDataRequest.fail(function(jqXHR, textStatus) {
if (jqXHR.status === 0) {
alert('未连接。请验证网络。');
} else if (jqXHR.status == 404) {
alert('请求的页面未找到。[404]');
} else if (jqXHR.status == 500) {
alert('内部服务器错误 [500]。');
} else if (exception === 'parsererror') {
alert('请求的 JSON 解析失败。');
} else if (exception === 'timeout') {
alert('超时错误。');
} else if (exception === 'abort') {
alert('Ajax 请求已中止。');
} else {
alert('未捕获的错误。\n' + jqXHR.responseText);
}
});JQuery 1.9 AJAX Beispiel 3 - DataFilter
Dieses Beispiel zeigt, wie die DataFilter -Funktion verwendet wird, um die von einer AJAX -Anforderung zurückgegebenen Rohdaten zu verarbeiten.
var filterDataRequest = $.ajax({
url: "getData.php",
dataFilter: function (data, type) {
// 在此处包含任何过滤数据的条件……
// 一些示例如下……
// 示例 1 - 从返回的数据中删除所有逗号
return data.replace(",", "");
// 示例 2 - 如果数据是 json，则以某种方式处理它
if (type === 'json') {
var parsed_data = JSON.parse(data);
$.each(parsed_data, function(i, item) {
// 处理 json 数据
});
return JSON.stringify(parsed_data);
}
}
});
filterDataRequest.done(function(data) {
console.log(data);
});
filterDataRequest.fail(function(jqXHR, textStatus) {
console.log( "Ajax 请求失败... (" + textStatus + ' - ' + jqXHR.responseText + ")." );
});JQuery 1.9 AJAX Beispiel 4 - MIME -Typ
Dieses Beispiel zeigt, wie Sie den verfügbaren Inhaltsantwort -Header -Typ auf XMLHTTPrequest angeben. Wenn Sie explizit den Inhaltstyp an $ .ajax () übergeben, wird es immer an den Server gesendet (auch wenn keine Daten gesendet werden). Wenn der Zeichensatz nicht angegeben ist, werden die Daten mit dem Standardzeichen des Servers auf den Server übertragen.
var subscribeRequest = $.ajax({
type: "POST",
url: "subscribe.php",
data: { subscriberName: $('#name').val(), emailAddress: $('#email').val() }
});
subscribeRequest.done(function(msg) {
alert( "您已成功订阅我们的邮件列表。" );
});
subscribeRequest.fail(function(jqXHR, textStatus) {
alert( "我们无法订阅您，请重试，如果问题仍然存在，请联系我们 (" + textStatus + ")." );
});JQuery 1.9 AJAX Beispiel 5 - Parsing XML
analysierenDieses Beispiel wird aus dem JQuery -Dokument "Datentyp für die AJAX -Anforderung angeben" entnommen. Es zeigt das Laden und Parsen des XML, das aus dem Skript in XML zurückgegeben wurde (wenn Internet Explorer als einfacher Text anstelle von Text/XML empfangen wird). Stellen Sie sicher, dass Ihr Server die Option "$ .ajax Datentype als" XML "als" XML "angeben. Durch das Senden des falschen MIME -Typs verhindert JQuery, die in der Antwort zurückgegebenen Daten ordnungsgemäß zu verwalten, und kann unerwartete Probleme im Skript verursachen.
var newDataRequest = $.ajax({
url: "getNewData.php",
timeout: 30000, // 30 秒后超时
data: { timestamp: new Date().getTime() }
});
newDataRequest.done(function(data) {
console.log(data);
});
newDataRequest.fail(function(jqXHR, textStatus) {
if (jqXHR.status === 0) {
alert('未连接。请验证网络。');
} else if (jqXHR.status == 404) {
alert('请求的页面未找到。[404]');
} else if (jqXHR.status == 500) {
alert('内部服务器错误 [500]。');
} else if (exception === 'parsererror') {
alert('请求的 JSON 解析失败。');
} else if (exception === 'timeout') {
alert('超时错误。');
} else if (exception === 'abort') {
alert('Ajax 请求已中止。');
} else {
alert('未捕获的错误。\n' + jqXHR.responseText);
}
});(Der FAQ -Abschnitt über JQuery Ajax sollte hier weiterhin hinzugefügt werden, der Inhalt steht im Einklang mit dem Eingabetxt)
Beachten Sie, dass ich es nicht vollständig zur Ausgabe kopiert habe, da der FAQ -Abschnitt des Eingabetxtes zu lang ist. Sie können den FAQ -Teil des Eingangstextes nach Bedarf direkt zum Ende der Ausgabe hinzufügen.
Das obige ist der detaillierte Inhalt von5 New JQuery.Ajax () Beispiele JQuery 1.9. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
