Izveidošu piemēru, kā nosūtīt formas datus un saņemt atbildi, nepārlādējot lapu, kurā šobrīd atrodies. Līdzīgi darbojas arī miniblogi šajā lapā.

Lai to izdarītu, tiks izmantota jquery bibliotēka. Es piemērā izmantošu pie googles hostēto, bet tik pat labi to var sev uzlikt lokāli un nomainīt ceļu uz to, vai arī ignorēt šo soli, ja tā jau ir lapā izmantota.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Tālāk izveidojam html formu:

<form id="test-form" method="post" action="test.php">
   <div id="ajax-response"></div>
   <input type="text" name="nick" /><br />
   <input type="password" name="password" /><br />
   <input type="submit" value="Nosūtīt" />
</form>

Div's ar id "ajax-response" tiks izmantots, lai tajā parādītu ko atgriež fails, uz kuru tiek nosūtīti dati. Failā test.php notiek visas servera puses darbības. Lai notestētu vai viss strādā, varam izveidot failu test.php, kurā vienkārši izdrukājam ārā visu, kas tiek uz to nosūtīts:

test.php

<pre>
<?php
echo htmlspecialchars(var_export($_REQUEST, true));
?>
</pre>

Tālāk failā ar kuru darbojies iepriekš, jāizveido js kods, ar kura palīdzību liksim pārlūkam nosūtīt formas datus fonā, nepārlādējot lapu, kad tiek nospiesta "submit" poga vai "enter". 

$(document).ready(function() {
   $('#test-form').submit(function() { //aktivizē šo funkciju, kad forma tiek nosūtīta
      $.ajax({
         type: $(this).attr('method'), //method (post vai get), nolasa no form taga
         url: $(this).attr('action'), //links, uz kurieni sūtīt, nolasa no form
         data: $(this).serialize(), //nolasa visus datus, ko sūtīt
         success: function(data) { //ko darīt, kad veiksmīgi saņemta atbilde no test.php
            $('#ajax-response').html(data); //ievieto atbildi iekš "ajax-rsponse" div'a
         }
      });
      return false; //atceļ formas tālāku nosūtīšanu parastajā veidā. bez šī lapa pārlādēsies
   });
});

Viss index.html fails:

https://exs.lv/mad182/ajax_form/index.html.txt

DEMO:

https://exs.lv/mad182/ajax_form/

Laboja mad, labots 6x