Notes d'étude jQuery - Opération Ajax (2) - Data Transfer_jquery

Demander des données

Nous pouvons utiliser GET et POST pour demander des données au backend. Ici, nous prenons PHP comme exemple. Supposons qu'il existe une page de test age.php, qui est utilisée pour renvoyer des informations sur l'âge.

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

Le contenu actuel de la page est :

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

Nous espérons obtenir les informations sur l'âge sans actualiser la page après avoir cliqué sur la balise a. Demandez d’abord des données à l’aide de la méthode GET :

Méthode GET

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

Après avoir cliqué sur la balise a, la page actuelle est :

Demande de données réussie. Testons-le à nouveau en utilisant la méthode POST :

Méthode POST

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

Le code est presque le même, sauf que la méthode get est remplacée par la méthode post.

Ici, nous pouvons effectivement utiliser la méthode load pour simplifier le code :

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

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

Envoyer des données

En plus d'utiliser la technologie Ajax pour obtenir des données du backend, vous pouvez également envoyer des données au backend. Un scénario courant consiste à soumettre un formulaire de manière asynchrone. Voici un exemple de vérification de l'utilisateur :

.

<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>

Supposons que la vérification réussisse lorsque le nom d'utilisateur est stephenlee et que le mot de passe est 123456, sinon elle échoue. La page de test validate.php est :

.

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

Utilisez la méthode get pour envoyer des données au backend pour vérification :

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

Après avoir entré le mauvais nom d'utilisateur Lucas, le résultat est :

Après avoir entré le nom d'utilisateur correct stephenlee, le résultat est :

L'idée d'utiliser la méthode post pour envoyer des données est la même, je n'entrerai donc pas dans les détails ici.