Analyse der Datenübertragung von jQuery Ajax Operation (2).

Die im vorherigen Artikel vorgestellten Beispiele für das Datenladen von <a href="http://www.php.cn/wiki/1495.html" target="_blank">jquery</a> Ajax beziehen alle Daten aus statischen Dateien, und der größere Wert von Ajax liegt in der Datenübertragung mit dem Back-End-Server . Daten dynamisch anfordern und senden.

Daten anfordern

Wir können GET、POST verwenden, um Daten vom Backend auf zwei Arten anzufordern. Hier nehmen wir PHP als Beispiel, vorausgesetzt, es gibt eine Testseite age.php für Rückgabe von Altersinformationen, der Inhalt ist:

if(isset($_REQUEST['name']) && $_REQUEST['name'] == 'stephen') {
    echo '23';
}

Der aktuelle Seiteninhalt ist:

<p>
  <a href="age.php">stephen</a>
  <span>age : </span>
  <span id="sex"></span>
</p>

Wir hoffen, dass nach dem Klicken auf a Tag, die Seite wird nicht aktualisiert. Erhalten Sie Altersinformationen unter der Voraussetzung. Verwenden Sie zunächst die Methode GET, um Daten anzufordern:

GET-Methode

  $('a').click(function(e) {
    e.preventDefault();//
    var url = $(this).attr('href'),
      name = $(this).text(),
      requestData = {'name': name};

    $.get(url, requestData, function(data) {
      $('#sex').html(data);
    });
  });

Nach dem Klicken auf das Tag a lautet die aktuelle Seite:

Datenanfrage erfolgreich. Testen wir noch einmal mit der Methode POST:

POST-Methode

  $('a').click(function(e) {
    e.preventDefault();//
    var url = $(this).attr('href'),
      name = $(this).text(),
      requestData = {'name': name};

    $.post(url, requestData, function(data) {
      $('#sex').html(data);
    });
  });

Der Code ist fast derselbe, außer dass die Methode get in die Methode post geändert wurde.
Hier können wir tatsächlich die load-Methode verwenden, um den Code zu vereinfachen:

  $('a').click(function(e) {
    e.preventDefault();
    var url = $(this).attr('href'),
      name = $(this).text(),
      requestData = {'name': name};

    $('#sex').load(url, requestData);
  });

Daten senden

Zusätzlich zur Verwendung der Ajax-Technologie, um Daten vom Backend abzurufen , Sie können es auch umgekehrt verwenden. Das übliche Szenario besteht darin, das Formular asynchron zu senden. Hier ist ein Beispiel für die Benutzerüberprüfung:

<form action="validate.php">
  username:<input id="username" name="username" type="text" />
  password:<input id="password" name="password" type="text" />
  <input value="submit" type="submit" />
</form>

Angenommen, der Benutzername ist stephenlee und das Passwort ist , ist die Überprüfung erfolgreich, andernfalls schlägt sie fehl. Die Testseite 123456 lautet: validate.php

if($_REQUEST['username'] == 'stephenlee' && $_REQUEST['password'] == '123456') {
    echo 'pass';
} else {
    echo 'fail';
}

Verwenden Sie die Methode

, um Daten zur Überprüfung an das Backend zu senden : get

  $('form').submit(function(e) {
    e.preventDefault();//
    var url = $(this).attr('action'), 
      username = $('input[name="username"]').val(),
      password = $('input[name="password"]').val(),
      requestData = {'username': username, 'password': password};

    $.get(url, requestData, function(result) {
      alert(result);
    });
  });

Geben Sie den falschen Benutzernamen ein

, das Ergebnis ist: lucas

Nach Eingabe des richtigen Benutzernamens

ist das Ergebnis lautet: stephenlee

Die Idee, die

-Methode zum Senden von Daten zu verwenden, ist dieselbe, daher werde ich hier nicht auf Details eingehen. post

Das obige ist der detaillierte Inhalt vonAnalyse der Datenübertragung von jQuery Ajax Operation (2).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!