Wyświetlanie rekordów bez przeładowania strony

pytanie zadane 4 lipca 2017 w JavaScript przez `Krzychuu Stary wyjadacz (13,940 p.)

Witam

Stworzyłem skrypt który dodaje do bazy danych Imie wykorzystując przy tym ajax, chciałbym teraz zrobić skrypt który po dodaniu nowego imienia do bazy od razu pojawiło się te imię na stronie, w jaki sposób mogę to wykonać?

1 odpowiedź

odpowiedź 4 lipca 2017 przez Chess Szeryf (76,710 p.)
edycja 4 lipca 2017 przez Chess

Gdy zostało wysłane zapytanie do bazy, żeby dodał nowy rekord do bazy to za pomocą Ajax'a pewnie już to zrobiłeś.

Teraz wyślij Ajax'em zapytanie, aby zwrócił ci wynik (wyświetlił rekordy z bazy). Możesz to wykonać, np. za pomocą funkcji setTimeout().

Nie jestem pewien, ale musisz wywołać tę funkcję, która jest odpowiedzialna za odpytanie servera.

setTimeout(makeRequest,1000);

function makeRequest(){ 
   httpRequest=new XMLHttpRequest();

   // (...)

   httpRequest.open('GET','Page.php');
}

komentarz 4 lipca 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

chodzi ci o tą formułę?

success:

komentarz 4 lipca 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

mój kod ajax

        $.ajax({
            type: 'POST',
            url: 'imie.php',
            data: {
                imie: 'Krzysztof',
            },
            success: function() {
                $('#wynik').html('Dodano rekord do bazy!');
            },
            error: function (jqXHR, errorText, errorThrown) {
                $('#wynik').html('Wystąpił błąd!');
            }
        });

komentarz 4 lipca 2017 przez xmentor Nałogowiec (49,520 p.)

Funkcja wykona się raz(w twoim przykładzie Chess). No i ta zmienna globalna, chyba że zakładałeś jej istnienie w kodzie :D

Funkcję, która ma pobierać dane, wywołuj po dodaniu nowego rekordu do tabeli.

komentarz 4 lipca 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

a będę musiał coś jeszcze dodać w ajaxie?

komentarz 4 lipca 2017 przez xmentor Nałogowiec (49,520 p.)

No musisz obsłużyć otrzymane dane.

komentarz 4 lipca 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

dane które otrzymam z funkcji success:?

komentarz 4 lipca 2017 przez xmentor Nałogowiec (49,520 p.)

Tak

komentarz 4 lipca 2017 przez Chess Szeryf (76,710 p.)

Hapsio.html:

<!-- Hapsio.html -->
<!Doctype html>
<html>

<body style="background:grey">

<form method="get" action="" onsubmit="event.preventDefault();">
	<input type="text" name="name" id="name"/>
	<input type="text" name="surname" id="surname"/>
	<input type="submit" id="submit"/>
</form>
 <div id="foo"></div>
<script src="hapsio.js"></script>


</body>
</html>

Hapsio.js:

 // Hapsio.js
var field_forms = document.getElementById('name');
var field_forms2 = document.getElementById('surname');
 
var foo = document.getElementById('foo');
 

(function(){ 
    var httpRequest;
    //setInterval(makeRequest,100);
	 
	var submit = document.getElementById('submit');

submit.addEventListener('click',function(){ 
	makeRequest();
},false);
     
    function makeRequest(){ 
        httpRequest=new XMLHttpRequest();
        if(!httpRequest){ 
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }
		 
		
        httpRequest.onreadystatechange=alertContents;
        httpRequest.open('GET','hapsio2.php?name='+field_forms.value+'&surname='+field_forms2.value);
        httpRequest.send(); 
    }
     
    function alertContents(){ 
        if(httpRequest.readyState===XMLHttpRequest.DONE){ 
            if(httpRequest.status===200){ 
                 foo.innerHTML = (httpRequest.responseText);
            }else{ 
                alert('There was a problem with the request.');
            }
        }
    }
})();

Hapsio2.php:

<?php 
// Hapsio2.php
$link = new mysqli('localhost','root','','hapsio');


$query = $link->query("insert into hapsio values (null,\"{$_GET['name']}\",\"{$_GET['surname']}\")");


//var_dump($query);

$query2 = ("select * from hapsio");


if ($result = $link->query($query2)) {

    /* fetch associative array */
    while ($row = $result->fetch_assoc()) {
        echo $row['id'].' '.$row['name'].' '.$row['surname']."<br />";
    }

    /* free result set */
    $result->free();
}

?>