ZooTickoon 7

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