Correction exercices AJAX : Série 03
Sommaire
- 1- Objectifs
- 2- Exercice 01
- 2.1- Énoncé
- 2.2- Solution
- 2.3- tp02-1 Ex01.html
- 2.4- tp02-1 Ex01.css
- 2.5- tp02-1 Ex01.js
- 2.6- tp02-1 Ex01.php
- 3- Exercice 02
- 3.1- Énoncé
- 3.2- Solution
- 3.3- tp02-1 Ex02.html
- 3.4- tp02-1 Ex02.css
- 3.5- tp02-1 Ex02.js
- 3.6- tp02-1 Ex02.php
- 4- Exercice 03
- 4.1- Énoncé
- 4.2- Solution
- 4.3- tp02-1 Ex03.html
- 4.4- tp02-1 Ex03.css
- 4.5- tp02-1 Ex03.js
- 4.6- tp02-1 Ex03.php
- 4.6.1- Sommaire du cours AJAX
Correction exercices AJAX : Série 03
-
Objectifs
- Apprendre à créer un système d’inscription
-
Exercice 01
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’application
-
Solution
-
tp02-1 Ex01.html
-
tp02-1 Ex01.css
-
tp02-1 Ex01.js
-
tp02-1 Ex01.php
<!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"> </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>#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;
}$(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
});<?php
if ($_POST['ip']):
$ip = gethostbyname($_POST['ip']);
echo($ip);
endif;
?>
