Ajax form
Dan hoef je dus enkel de server side validatie te doen (via PHP) en een message doorspelen naar de view aan de hand van een ajax request 
$(".ajaxForm").submit(function(e){
var formURL = $(this).attr('action');
var method = $(this).attr('method');
var formData = $(this).serializeArray();
var responseObj = $(this).attr('data-response');
$.ajax(
{
url : formURL,
type: method,
data : formData,
dataType: 'html', /* json ook handig (zoek het op) */
success:function(data, textStatus, jqXHR)
{
responseObj.html(data);
}
});
e.preventDefault();
});
Toon Meer
Zo kan je een form Ajax gestuurd a.h.v. de laatste stabiele jquery library 'submitten'
Attributen mee te geven aan je form object:
- action : Welke URI ?
- method : POST / GET / PUT / DELETE?
- data-response : Voorbeeld: #login-response (Dan in je tree een <div id="login-response"></div>) Ook mogelijk met classes voorbeeld: .login-response en (Dan in je tree <div class='login-response'></div>) Werken met ID is meer aangeraden aangezien je van elke ID maar 1 object zou mogen hebben in je HTML tree, het is uiteraard de bedoeling dat maar 1 response object word aangepast
- formData: zorg ervoor dat alle inputs aanwezig in de form correct zijn en dit word netjes in de juiste array gestopt a.h.v. de jquery functie serializeArray() deze waarden worden dan meegespeelt naar je action script onder $_POST['key'] = waarde Indien je GET, PUT of DELETE gaat gebruiken zal dit dus ook veranderen naar $_GET, $_PUT of $_DELETE.
EN de HTML:
<div id="ajaxResponse"></div>
<form action="pad/naar/script.php" method="POST" data-response="#ajaxResponse" class="ajaxForm">
<input type="text" name="username"/>
<input type="submit" name="submit" value="Doe!"/>
</form>
Voorbeeld van hoe je form er zou uitzien, de attributen van je form zijn hier belangrijk indien je bovenstaande jQuery code wilt gaan gebruiken.
Ook je response object voorzien in je tree om een error of succes bericht door te spelen naar de gebruiker.
Deze code zal dus letterlijk een ajax request maken naar de meegegeven action URI met alle input aanwezig in je form.
In je action script kan je de nodige validatie uitvoeren en een action message genereren om mee te geven aan je view side.
De response bij deze ajax call zal in het object geplaatst worden die jij meespeelt in het attribuut data-response in je form tag. (Zie data response voorbeeld hierboven)
Om te testen kan je dus in je action script <?PHP var_dump($_POST); ?> plaatsen en zo zul je een array van variabelen zien verschijnen na het submitten van je form, zorg er dus voor dat je data response object aanwezig is in je HTML tree
Met bovenstaande jQuery code kan je dus niet enkel 1 form maar alle forms naar wens via ajax laten verlopen!
Enige wat je moet doen is zorgen dat de code geïmporteerd word op de pagina met je form en ervoor zorgen dat je form attributen correct zijn ingevuld form class moet dus ajaxForm zijn ook
Belangrijk voor usability:
En indien je ook zou willen indien de gebruiker JS heeft uitgeschakeld dat de form ook normaal word uitgevoerd met een http request moet je gewoon zorgen dat je script (action script) dit opvangt en dan ook indien een http request de gehele view inclusief error/succes message printen en indien ajax request enkel de error/succes message printen.
Kan heel simpel door bv een extra (hidden) input waarde mee te geven bv: name='type' value='http' of ajax ?? en standaard http te plaatsen en indien document ready (js zal netjes uitgevoerd worden indien je is ingeschakeld..) daar plaatsen we dan bv: $("input[name=type]").val('ajax'); om het type van de form aan te passen zodat we een ajax form krijgen als js ingeschakeld is. Om dit dan netjes te kunnen onderschijden in ons action script onder $_POST['type'] = http of ajax ?
