Correction exercices AJAX : Série 03

Correction exercices AJAX : Série 03

  1. Objectifs

    • Apprendre à créer un système d’inscription
  2. Exercice 01

    1. Énoncé
    2. Solution
      1. tp02-1 Ex01.html
        • <!doctype html>
          <html lang="fr">
          <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Filtre de base First</title>
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
           <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
          
           <script type="text/javascript" src="tp02-1 Ex01.js"></script>
           <link rel="stylesheet" type="text/css" href="tp02-1 Ex01.css">
          </head>
          
            <body>
              <div class="container ">
                <div class="row">
                  <div class="col-md-8">
                    <div class="idDiv">           
                     <center> <h3>Trouver l'adresse ip correspondant à un nom de domaine</h3></center>
                      <p>Saisir un nom de domaine pour trouver l'adresse IP qui lui correspondant.</p>
                      <form action="">
                        <div class="form-group" style="width: 60%;margin: 0 auto;padding-bottom: 10px;">
                          <label for="usr">Saisir un nom de domaine:</label>
                          <input type="text" class="form-control" id="searchip">
                        </div>
                        <div id="resultip">&nbsp;</div></br>
                        <button id="searchipbutton" type="button" class="btn btn-primary btn-block">Cliquer pour obtenir l'adresse ip</button>
                      </form> 
                      
                     
          
          
                   </div>
                  </div>
                </div>
              </div>
                <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>-->
            </body></html>
      2. tp02-1 Ex01.css
        • #resultip{
                  background-color: #eee;
                  border: 2px solid blue;
                  border-radius: 10px;
                  width: 60%;
                  margin: 0 auto;
                  font-size: 38px;
                  font-weight: bold;
                  font-family: 'Orbitron',sans-serif;
                  text-align: center;
          }
          .idDiv{border: 2px solid blue;
              border-radius: 6px;margin: 10px;font: 1.2em arial, 
                helvetica, sans-serif;
              padding: 20px;}
              #searchip{
          font-size: 18px;
              }



      1. tp02-1 Ex01.js
        • $(function(){
          $('#searchipbutton').click(function(){ 
          	$.ajax({ 
          	  type: "post", 
          	  url: "tp02-1 Ex01.php", 
          	  data: 'ip=' + $('#searchip').val() 
             }).done(function(msg){ 
          	if (msg != $('#searchip').val()) 
          	  $('#resultip').html(msg); 
          	else 
          	  $('#resultip').html("domaine non valide"); 
             }); // fin de .done() 
           }); // fin du gestionnaire d'événement
          });
      2. tp02-1 Ex01.php
        • <?php 
          if ($_POST['ip']): 
          	$ip = gethostbyname($_POST['ip']); 
          	echo($ip); 
          endif;
          ?>
          



Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement