Detaillierte Erläuterung der Beispiele für die Methoden „load()' und „post()' von Ajax in jQuery

Detaillierte Erläuterung der Beispiele für die Methoden „load()' und „post()' von Ajax in jQuery_jquery

WBOY

Freigeben： 2016-05-16 15:21:43

Original

1696 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Methoden „load()“ und „post()“ von Ajax in jQuery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1. Methode „load()“

Die Methode „load()“ von jQuery Ajax kann den Remote-HTML-Dateicode laden und in das DOM einfügen. Dies unterscheidet sich immer noch ein wenig von „Post and Get“, aber sie kann den HTML-Code einer Seite schnell laden und speichern DOM und ausführbare Datei.

Die Methode „load()“ verwendet standardmäßig die GET-Methode. Wenn der Datenparameter übergeben wird, wird die Methode „Post“ verwendet.

Automatisch in den POST-Modus konvertieren, wenn zusätzliche Parameter übergeben werden. In jQuery 1.2 können Sie einen Selektor angeben, um das geladene HTML-Dokument zu filtern. Nur der gefilterte HTML-Code wird in das DOM eingefügt. Die Syntax ist wie „url #some > selector“, der Standardselektor ist „body>*“.

Erklärung:

load ist die einfachste Ajax-Funktion, ihre Verwendung weist jedoch Einschränkungen auf:

1. Es wird hauptsächlich für Ajax-Schnittstellen verwendet, die direkt HTML zurückgeben
2. Load ist eine jQuery-Wrapper-Methode, die auf dem jQuery-Wrapper aufgerufen werden muss und den zurückgegebenen HTML-Code in das Objekt lädt. Selbst wenn eine Rückruffunktion festgelegt ist, ist es unbestreitbar, dass die Ladeschnittstelle clever gestaltet und einfach zu verwenden ist. Hier ist ein Beispiel: Demonstrieren Sie die Verwendung der Load-Schnittstelle:

load()-Funktion:

Funktionseinführung: load(url, [data], [callback]) Rückgabewert: jQuery

Parameterbeschreibung:

URL: URL der zu ladenden HTML-Webseite.
Daten: (optionaler Parameter) Schlüssel-/Wertdaten, die an den Server gesendet werden.
Rückruf: (optionaler Parameter) Rückruffunktion bei erfolgreichem Laden.

Eine Beispieldemonstration finden Sie unten:

Erstellen Sie zunächst die test.html-Datei, die geladen werden muss:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax演示</title>
</head>
<body>
脚本之家(www.jb51.net),提供大量脚本及素材供大家下载!
</body>
</html>

Nach dem Login kopieren

Erstellen Sie dann die Datei ajax.html und denken Sie daran, jquery einzuführen.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
 $(document).ready(function(){
 $("#btn").click(function(){
  $("#result").load("test.html",function(responseText,textStatus){
  $("#display").append("<hr>responseText:"+responseText);
  $("#display").append("<hr>textStatus:"+textStatus);
  }); 
 });
 });
</script>
</head>
<body>
<input type="button" value="测试" id="btn" />
<h2>显示的内容如下：</h2>
<div id="result"></div>
<h2>结果：</h2>
<div id="display"></div>
</body>
</html>

Nach dem Login kopieren

Das obige Beispiel zeigt, wie die Load-Methode verwendet wird.

Tipps:

① Wir müssen immer auf das Browser-Caching achten. Bei Verwendung der GET-Methode müssen wir den Zeitstempelparameter (net Date()).getTime() hinzufügen, um sicherzustellen, dass die gesendete URL jedes Mal unterschiedlich ist, um Browser-Caching zu vermeiden.

② Wenn nach dem URL-Parameter ein Leerzeichen hinzugefügt wird, z. B. „“, wird der Fehler „Unbekanntes Symbol“ angezeigt und die Anfrage kann weiterhin normal gesendet werden. Der HTML-Code kann jedoch nicht in das DOM geladen werden ist nach dem Löschen behoben.

2. post()-Methode

Ajax in jquery verfügt über zwei Datensendemodi: einer ist get(), der im vorherigen Artikel erwähnt wurde, und der andere ist post(). Lassen Sie mich es Ihnen noch einmal vorstellen. Freunde, die mehr wissen möchten, können darauf verweisen.

Zunächst müssen Sie jQuery.post(url, [data], [callback], [type]) kennen

Beschreiben Sie die Parameter:

URL: Anfrageadresse senden.
Daten: Zu sendende Schlüssel-/Wertparameter.
Rückruf: Rückruffunktion bei erfolgreichem Senden.
Typ: Inhaltsformat zurückgeben, XML, HTML, Skript, JSON, Text, _default.

Beschreibung:

Informationen per Remote-HTTP-POST-Anfrage laden.

Dies ist eine einfache POST-Anfragefunktion zum Ersetzen der komplexen $.ajax. Die Callback-Funktion kann aufgerufen werden, wenn die Anfrage erfolgreich ist. Wenn Sie eine Funktion im Fehlerfall ausführen müssen, verwenden Sie $.ajax.

Schauen wir uns zunächst ein einfaches Beispiel an

Code kopieren Der Code lautet wie folgt:

$_POST[ 'name']));?>

Erstellen Sie dann die Datei ajax.html und achten Sie auf den js-Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
 $(document).ready(function(){
 $("#sub").click(function(){
  $.post("testPost.php",{name:$("#name").val()},function(data,textStatus){
  $("#result").append("data:"+data.name);
  $("#result").append("<br>textStatus:"+textStatus);
  },"json");
  return false;
 });
 });
</script>
</head>
<body>
<form action="testPost.php" method="post">
 <input type="text" name="name" id="name" >
 <input type="submit" id="sub" value="提交">
</form>
<h2>显示的内容如下：</h2>
<div id="result"></div>
</body>
</html>

Nach dem Login kopieren

Verwendung 2: (Klicken Sie auf Daten posten, um Daten zurückzugeben)

<input type="button" id="bnajax" value="ajax" onclick="ajaxTest()" />
<script type="text/javascript" >
 function ajaxTest()
 {
 $.post("http://localhost:8012/t.asp", { "txt": "123" },function(data)
 {
  $("#divMsg").html(data);
 }
 );
 }
</script>

Nach dem Login kopieren

Beispiel 3

JS-Code:

<script>
$(document).ready(function(){
  $(".ajax_btn").click(function(){
   $.post("ajax.php",//异步处理动态页面
   {name:$(".name").val()},//获取类名为"name"文本的值，以NAME异步传值
   function(data){//data为反回值，function进行反回值处理
     $(".content").val(data);//获得得反回值后，将其填入到类名为"content"的文本框中
   });
  })
})
</script>

Nach dem Login kopieren

ajax.php-Code:

<&#63;php
$name=$_POST["name"];
if($name=="netxu"){
  echo "对不起，".$name."数据存在";
}
else{
  echo "恭喜你，".$name."可以使用";
}
&#63;>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.