AJAX – odeslání formuláře pomocí JQuery

Najít funkční bezchybné příklady s AJAXem je docela peklo, takže se vyplatí nejlepší vzorové skripty zaarchivovat a sice nejlépe na blogu, kde se dají kdykoliv rychle dohledat.

Odeslání formuláře AJAXem s využitím JQuery

Formulář a obslužný skript

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

<form id="formular1" method="post">
  <div>
    <label>Pole 1</label>
    <input type="text" id="pole1">
  </div>
  <div>
    <label>Pole 2</label>
    <input type="text" id="pole2">
  </div>
  <div>
    <input type="submit" value="Odeslat">
  </div>
</form>

<div id="info"></div>

<script>
    $("#formular1").submit(function(event) {
    
      event.preventDefault();
    
      var $form = $(this);
      var url = "ajax-page.php";
    
      var odeslani = $.post(url, {
        pole1: $('#pole1').val(),
        pole2: $('#pole2').val()
      });
     
      odeslani.done(function(data) {
        $('#info').text(data);
      });
      odeslani.fail(function() {
        $('#info').text('failed');
      });
    });
    </script>
    
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

</form>

$("#formular1").submit(function(event) {

event.preventDefault();

var $form = $(this);

var url = "ajax-page.php";

var odeslani = $.post(url, {

pole1: $('#pole1').val(),

pole2: $('#pole2').val()

});

odeslani.done(function(data) {

$('#info').text(data);

});

odeslani.fail(function() {

$('#info').text('failed');

});

</script>

</body>

</html>

php skript ajax-page.php volaný po odeslání formuláře:

<?php 
if(isset($_POST['pole1'])){
	echo $_POST['pole1'];
}
else{
	echo "Žádná data!";
}
?>

<?php

if(isset($_POST['pole1'])){

echo $_POST['pole1'];

}

else{

echo "Žádná data!";

}

Je-li volání úspěšné, dojde k zobrazení zpětně předaných dat z ajax-page.php v div tagu #info:

odeslani.done(function(data) {
$(‚#info‘).text(data);
});

Odeslání formuláře AJAXem – starší metoda

<!DOCTYPE html>
<html>
 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 
<body>

    <h1>Odeslání formuláře (starší obšírnější metoda)</h1>

    <form method="POST" enctype="multipart/form-data" id="formular">
        <input type="text" name="title"/><br><br>
        <input type="file" name="files"/><br><br>
        <input type="submit" value="Odeslat" id="tlacitko"/>
    </form>

    <span id="info"></span>

    <script type="text/javascript">

    	$(document).ready(function () {
            $("#tlacitko").click(function (event) {

                event.preventDefault();

                var form = $('#formular')[0];
                var data = new FormData(form);

                //takto lze připojit další data, aniž by bylo potřeba použít hidden field
                data.append("doplnek", "Toto jsou dodatečné informace");   

                $("#tlacitko").prop("disabled", true);

                $.ajax({
                    type: "POST",
                    enctype: 'multipart/form-data',
                    url: "ajax-page2.php",
                    data: data,
                    processData: false,
                    contentType: false,
                    cache: false,

                    success: function (data) {
                        $("#info").text(data);
                    },

                    error: function (e) {
                        $("#info").text(e.responseText);
                        console.log("ERROR : ", e);
                    }
                });
            });
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h1>Odeslání formuláře (starší obšírnější metoda)</h1>

</form>

$(document).ready(function () {

$("#tlacitko").click(function (event) {

event.preventDefault();

var form = $('#formular')[0];

var data = new FormData(form);

//takto lze připojit další data, aniž by bylo potřeba použít hidden field

data.append("doplnek", "Toto jsou dodatečné informace");

$("#tlacitko").prop("disabled", true);

$.ajax({

type: "POST",

enctype: 'multipart/form-data',

url: "ajax-page2.php",

data: data,

processData: false,

contentType: false,

cache: false,

success: function (data) {

$("#info").text(data);

error: function (e) {

$("#info").text(e.responseText);

console.log("ERROR : ", e);

}

});

</script>

</body>

</html>

ajax-page2.php

<?php 
if(isset($_POST['title'])){
	echo $_POST['title'];
}
else{
	echo "Žádná data!";
}
?>

<?php

if(isset($_POST['title'])){

echo $_POST['title'];

}

else{

echo "Žádná data!";

}

GET a POST volání PHP skriptů AJAXem s využitím JQuery

Nejjednodušší způsob jak spustit skript na serveru pomocí AJAXu (s předáním parametrů skriptu):

<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        
        var id_polozky = this.id;  //id elementu, na který uživatel kliknul (zde button)
        var user = $("#loggeduser").val();  //id elementu, na který uživatel kliknul (zde button)

        $.get("https://www.vasweb.cz/zapis_status.php", {id: id_polozky, username: user} , function(data){
            
            $("#vysledek").html(data);  // Zobrazení dat vrácených ze serveru
        });
    });
});
</script>
</head>
<body>  
    <button id="532" type="button">Objednávka č. 532 odeslána</button>
    <button id="488" type="button">Objednávka č. 488 odeslána</button>
    <div id="vysledek"></div>
    <input type="hidden" id="loggeduser" value="">
</body>
</html>

<!DOCTYPE html>

<head>

$(document).ready(function(){

$("button").click(function(){

var id_polozky = this.id; //id elementu, na který uživatel kliknul (zde button)

var user = $("#loggeduser").val(); //id elementu, na který uživatel kliknul (zde button)

$.get("https://www.vasweb.cz/zapis_status.php", {id: id_polozky, username: user} , function(data){

$("#vysledek").html(data); // Zobrazení dat vrácených ze serveru

});

</script>

</head>

<body>

<button id="532" type="button">Objednávka č. 532 odeslána</button>

<button id="488" type="button">Objednávka č. 488 odeslána</button>

</body>

</html>

zapis_status.php

<?php
$id = htmlspecialchars($_GET["id"]);
$username = htmlspecialchars($_GET["username"]);

if(is_numeric($id) && $id > 0)
{
    $SQL = "UPDATE objednavky SET stav = '$stav', uzivatel = '$username' WHERE id = $id ";
    $update = mysqli_query( $mysqli, $SQL );

    echo "Stav objednávky $id byl zauktualizován.";
}
else{
    echo 'ERR';
}
?>