ZooTickoon 7

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

• Create the use case diagram in your application

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

• the PHP page will send an HTTP 200 code if successful, or 403 in case of error, without any other message. https://www.php.net/manual/fr/function.http-response-code.php
• In case of error, tell the user that his/her login or password are incorrect, using bootstrap.

<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