Analyse de l'opération jQuery Ajax (2) Transfert de données

Les exemples de chargement de données de <a href="http://www.php.cn/wiki/1495.html" target="_blank">jquery</a> Ajax introduits dans l'article précédent obtiennent tous des données à partir de fichiers statiques, et la plus grande valeur de Ajax réside dans le transfert de données avec le serveur back-end . Demander et envoyer des données de manière dynamique.

Demander des données

Nous pouvons utiliser GET、POST pour demander des données au backend de deux manières. Ici, nous prenons PHP comme exemple, en supposant qu'il existe une page de test age.php pour. renvoyant les informations sur l'âge, le contenu est :

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

Le contenu actuel de la page est :

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

Nous espérons qu'après avoir cliqué sur le a balise, la page ne sera pas actualisée. Obtenez des informations sur l'âge sous le principe. Utilisez d'abord la méthode GET pour demander des données :

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 à 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 réellement 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 l'utiliser à l'envers. Le scénario courant consiste à soumettre le formulaire de manière asynchrone. Voici un exemple de vérification d'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 le nom d'utilisateur soit <.> et le mot de passe est , la vérification réussit, sinon elle échoue. La page de test stephenlee est : 123456validate.php

Utilisez la méthode

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

pour envoyer les données au backend pour vérification. :

get

Entrez le mauvais nom d'utilisateur

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

, le résultat est :

lucas

Après avoir entré le bon nom d'utilisateur

, le résultat est :

stephenlee

L'idée d'utiliser la méthode

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!