Scribd Logo
Importer

Bienvenue sur Scribd !

  • Tutorial

    Transféré par

    api-19641877
    59 vues3 pages
    This is a very simple tutorial to understand Ajax-Requests and how it can work with php. We try to create a HTML-Form with some $_POST values, that can be sent to a php-file by a normal submit or, if JavaScript is enabled, by an ajax request. We would like to use the same PHP-function to answer the request, so there will be no redundant code.

    Description originale:

    Titre original

    tutorial

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    This is a very simple tutorial to understand Ajax-Requests and how it can work with php. We try to create a HTML-Form with some $_POST values, that can be sent to a php-file by a normal submit or, if JavaScript is enabled, by an ajax request. We would like to use the same PHP-function to answer the request, so there will be no redundant code.

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    59 vues3 pages

    Tutorial

    Transféré par

    api-19641877
    This is a very simple tutorial to understand Ajax-Requests and how it can work with php. We try to create a HTML-Form with some $_POST values, that can be sent to a php-file by a normal submit or, if JavaScript is enabled, by an ajax request. We would like to use the same PHP-function to answer the request, so there will be no redundant code.

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 3

    Simple AJAX Tutorial by Stephan Spies

    tutorial: Simple form-submit using AJAX


    author: Stephan Spies info(at)optima-software(dot)de
    date: 2006/08/01
    version 1.0.

    A. Description

    This is a very simple tutorial to understand Ajax-Requests and how it can work with PHP.
    What we try to do is:

    • Create a HTML-Form with some $_POST values, that can be sent to a php-file by a
    normal submit or, if Javascript is enabled, by an AJAX request. The result, of course,
    must be the same in both ways.
    • We would like to use the same PHP-function to answer the request, so there will be no
    redundant code.
    • At least, we will try to write down some JavaScript-functions that can be used in more
    than one form.

    Test-Script

    1. Create a normal HTML-Form

    On the test-script you can see the form I created. It has a radio-select (male or femal, name:
    gender, values: m,f), an input-field (name: your_name), a select-field with two options ("I am
    coming" or "I am going", name:doing, values:come,go), a textarea for the "answer" and a
    submit botton. There should be no problem to create this form. Make shure that the textarea
    has an id named answer_id.

    Now, on the form-tag we need to call our ajax-funtion:

    1. <form action="" method="post"


    2. onsubmit="submitAjax('ajax-test.php', this, 'answer_id');
    3. return false;">

    This will call our AJAX-function submitAjax() and, if everything is ok, give back false so the
    normal form-submit will NOT be executed. If AJAX-function fails, f.e. JavaScript is disabled,
    the normal form-submit will be executed instead.

    The variables that are give to the AJAX-function are:

    • index.php, the url to request


    • this, the form itself
    • answer_id, the id of the HTML-element, where the AJAX-answer has to be written. In
    our example it is a textarea field. But it can also be a div or anything else.

    Set an echo of a php-variable between the textarea-tags, so we can output our answer for the
    normal requests:

    1. <textarea id="answer_id">
    2. <? echo $answer; ?>
    3. </textarea>

    2. Create a PHP-function for the request

    Now we need a PHP-function to answer the request. Place it on the top of your php-file.
    I did the following...

    1. <?php
    2. function saySomething () {
    3. $answer = 'What?';
    4. $gender = '';
    5. $your_name = isset($_POST['your_name']) ? $_POST['your_name'] :
    '';
    6. $doing = isset($_POST['doing']) ? $_POST['doing'] : 'come';
    7. if (isset($_POST['gender'])) {
    8. if ($_POST['gender']=='m') $gender = 'Mister';
    9. if ($_POST['gender']=='f') $gender = 'Miss';
    10. }
    11. if ( isset($_POST['your_name']) && isset($_POST['doing']) ) {
    12. if ($_POST['doing'] == 'come') {
    13. $answer = 'Hello ' . $gender . ' ' . $your_name;
    14. } else {
    15. $answer = 'Good by ' . $gender . ' ' . $your_name;
    16. }//else
    17. }//if ( isset($_POST['your_name'])
    18. return $answer;
    19. }//function saySomething
    20. ?>

    As you can see, we give back a very meaningful answer. For normal requests we need to call
    this function, just before the form is written. So, insert the following before output of the
    html-form:

    1. <?php
    2. $answer = saySomething();
    3. ?>

    Nothing heard about AJAX until here? But the normal post should already work, isn't it? If not,
    download my script at the end of the page and compare it with your own file.

    3. Get AJAX work

    Now its time to get AJAX work. Please have a look at the ajax.js file. The Javascript-file is
    well documented, so if you are interessted in, you should not have any problem to understand
    what is happening.

    Include it in your page-header:

    1. <head>
    2. <script src="ajax.js" type="text/javascript"></script>
    3. (rest of header)
    4. </head>
    If you open the ajax.js file you will see, that the submitAjax function add a post-var named
    action with the value ajax to the request. We will need this on php-side.

    On top most of your php-file add the following lines:

    1. <?php
    2. if ( isset($_POST['action']) && $_POST['action']=='ajax') {
    3. sleep(1); /** just for fun, see what is happening **/
    4. $ajax_result = saySomething();
    5. echo $ajax_result;
    6. exit;
    7. }
    8. ?>

    Have a look at the exit at the end of these lines. It is very important to leave the file here. If
    not, the whole page will be sent back to AJAX and shown in your textarea field. The rest of
    these lines should not need to be described.

    If nothing went wrong, your little script should work now. If javascript is enabled, you should
    see the wait-message in the textarea and after one second, there should be the AJAX-answer.
    And... you should not see any page-reload, its AJAX! If you disable javascript in your browser,
    you will see a normal HTTP_POST with a page-reload, but the function should work anyway.

    For any reason, if it does not work, download my script and find out what was missing.

    Stephan

    Downloads for this tutorial


    Description Type Filesize Link

    Java-Script file for this tutorial .ZIP 1,84 KB ajax.js.zip

    PDF Tutorial .PDF 113 KB ajax-tutorial.pdf

    All tutorial files .ZIP 108 KB simple-ajax-tutorial.zip

    Vous aimerez peut-être aussi