jQuery-Studiennotizen – Ajax-Operation (2) – Datenübertragung_jquery

Daten anfordern

Wir können GET und POST verwenden, um Daten vom Backend anzufordern. Hier nehmen wir an, dass es eine Testseite age.php gibt, die zur Rückgabe von Altersinformationen verwendet wird

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

Der aktuelle Seiteninhalt ist:

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

Wir hoffen, die Altersinformationen zu erhalten, ohne die Seite nach dem Klicken auf das Tag „a“ aktualisieren zu müssen. Zuerst Daten mit der GET-Methode anfordern:

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 ein Tag lautet die aktuelle Seite:

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

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 Get-Methode in die Post-Methode geändert wurde.

Hier können wir tatsächlich die Lademethode 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 zum Abrufen von Daten vom Backend können Sie Daten auch asynchron an das Backend 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>

Gehen Sie davon aus, dass die Überprüfung erfolgreich ist, wenn der Benutzername Stephenlee und das Passwort 123456 lautet. Andernfalls schlägt die Testseite „validate.php“ fehl:

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

Verwenden Sie die get-Methode, um Daten zur Überprüfung an das Backend zu senden:

 $('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);
  });
 });

Nach Eingabe des falschen Benutzernamens lucas ist das Ergebnis:

Nach Eingabe des korrekten Benutzernamens stephenlee lautet das Ergebnis:

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