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

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

WBOY

Libérer： 2016-05-16 16:43:28

original

1168 Les gens l'ont consulté

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';
}

Copier après la connexion

Le contenu actuel de la page est :

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

Copier après la connexion

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);
  });
 });

Copier après la connexion

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);
  });
 });

Copier après la connexion

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);
 });

Copier après la connexion

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>

Copier après la connexion

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';
}

Copier après la connexion

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);
  });
 });

Copier après la connexion

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