logo   AJAX - Request.





Request er den del af HTTP-protokollen der overfører data fra browseren til webserveren.


FORMs i HTML-programmer anvendes som oftest til at starte en AJAX-aktivitet.


FORMs, der skal bruges til et AJAX request opbygges på samme måde som almindelige forms med undtagelse af '<form ...' linien. Den kan opbygges på (min.) 2 måder:


  • Normal + id
    Udover de normale parametre kan formen også indeholde selektoren 'id="x"', der bruges til at koble op til javaScriptet.
  • id
    Indeholder kun selektoren 'id="x"', der bruges til at koble op til javaScriptet.


javaScript programmet

- læser dataene fra formen
- sender dataene videre til web serveren
- afventer at der kommer svar tilbage fra serveren
- sender svar videre til browseren
- sætter den normale response-funktionalitet ud af kraft.


PHP-programmer opbygges grundlæggende ens i under normale forhold og i _AJAX-regie. Dog er det i AJAX-regie
- ikke muligt at indlægge defaultværdier i formens felter. - kun muligt at tilbageføre små datamængder til skærmbilledet.


Det er god kodeskik at anføre, hvilke jQuery metoder man har anvendt.




Normal + id


Form


Udover det almindelige indhold kan også indsættes en 'id'-selektor, der kan knytte formen til javascriptet. Når der er flere forms på den afsendende side skal parameteret anvendes til at identificere form og javaScript overfor hinanden. Er der kun en form, er der ingen behov for parameteret.


<form id="target" method="POST" action="ajaxformphp.php">
    <div><input type="text" name="name" placeholder="dit navn"></div>
    <div><input type="text" name="email" placeholder="din email"></div>
    <div><textarea name="message" placeholder="din meddelelse"></textarea></div>
    <input type="submit" value="Send">
</form>


js


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
    // http://api.jquery.com/jquery.ajax/
    // http://api.jquery.com/serialize/
    // http://api.jquery.com/submit/
    // http://api.jquery.com/jquery.getjson/

    $(document).ready(function () {

       // $("#target").on('submit', function (event) {      // Når flere forms på HTML-siden
       $("form").on('submit', function (event) {      // Når kun en enkelt form på HTML-siden.
          var this_form = $(this);
          var type = this_form.attr('method');
          var url = this_form.attr('action');
          // var url = "ajaxformphp.php";
          // var params = ($(this).serialize());
          var params = this_form.serialize();
          $.ajax({
             // type: "POST", // type: "GET"
             type: type,
             url: url,
             dataType: "json",
             data: params
          })
-----

Her indsættes kode til håndtering af response

-----
          event.preventDefault();
       }); // submit slut
    });
</script>


php


PHP programmet, der er placeret i en fil for sig selv, modtager POST (eller GET)-data på normal


<?php if (isset ($_POST['submit'])) //start POST
{
$name = htmlentities(trim ($_POST['name']),ENT_QUOTES, "utf-8");
$email = htmlentities(trim ($_POST['email']),ENT_QUOTES, "utf-8");
$message = htmlentities(trim ($_POST['message']),ENT_QUOTES, "utf-8");

Her indsættes den kode, der er nødvendig for at php-programmet kan udføre sin opgave.

$ar = array("error"=>0, "navn"=>$name, "mail"=>$email, "msg"=>$message); // opsamler data til overførsel til js-programmet.
} else {
$ar = array("error"=>1, "msg"=>"mangler parameter"); // opsamler data til overførsel til js-programmet.
}
-----

Her kan indsættes kode til overførsel af array med response-data.

-----
?>




id


Overfor javaScript programmet identificeres formen alene ved en 'id'-selektor. De øvrige nødvendige form-attributter (method og action) tilføres i javaScriptet som 'url' og 'type'.


Form

<form id="target">
    <div><input type="text" name="name" placeholder="dit navn"></div>
    <div><input type="text" name="email" placeholder="din email"></div>
    <div><textarea name="message" placeholder="din meddelelse"></textarea></div>
    <input type="submit" value="Send">
</form>


js

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
    // http://api.jquery.com/jquery.ajax/
    // http://api.jquery.com/serialize/
    // http://api.jquery.com/submit/
    $(document).ready(function () {
          // alle forms, vil jeg nok ikke bruge
          $("form").on('submit', function (event) {
          // $("#target").on('submit', function (event) {
          var params = ($(this).serialize());
          var url = "ajaxformphp.php";
          $.ajax({
             type: "POST", // type: "GET"
             url: url,
             data: params
          })
-----

Her indsættes kode til håndtering af response

-----
          event.preventDefault();
       }); // submit slut
    });
</script>


php

Som ved 'Normal + id' ovenfor




















x
x