Créé en 2021 et modifié le 23 Jan 2022

Créé en 2021 et modifié le 23 Jan 2022

Ajax

–diag cas utilisation–
–ajax–
–protocole http–

Ressources

On top of the previous ones, on this site Ajax  and for the use case diagram

Intro

Part 1

  • check you didn’t pick the slim version jquery which does not contain ajax
  • add a button named Ajax, with the login result on your page bonjour.php.
  • add the folloxing event to function.js without $(document).ready(function () if it is already there.
$(document).ready(function () {
//click sur l'id btn
$('#btn').click(function () {
$.ajax("http://localhost/bonjour.php",//appel de bonjour.php sur le serveur web
{
type: "GET",
success: function (resultat) {
$("#result").html(resultat);
}
});
});
});
  • Click the button, Hello shoul appear. JS has just called the content of a PHP page.
  • Check the call in the network tab of your browser.

Part 2

  • modify the authentication form to make an ajax call of your page verification.php with JQ.


xeonbd.com

<script>
$(document).ready(function () {
    $('.btn').click(function () {
        $("#result").html("");
        let email=$( "#exampleInputEmail1" ).val();
        let password=$( "#exampleInputPassword1" ).val();
        $.ajax("http://localhost/verification.php",
            {
                type: "GET",
                data: 'email=' + email + '&password=' + password,
                success: function (data, textStatus, jqXHR) {
                    console.log(jqXHR.status);
                    $("#result").html(data);
                },
                error: function (xhr,status,error) {
                    console.log(xhr.status);
                }
                
            });
    });
});
</script>

 

 

Part 3

  • Display a drop-down list of ticket numbers using Ajax on an html page
  • When selecting a number, display the details of the ticket underneath using Ajax without refreshing
  • Allow the resolution of the ticket on the same page using Ajax without refreshing