Dziś wykonujemy i próbujemy wykonać formularz rejestracyjny w PHP i wstawić dane do bazy danych za pomocą Ajax z techniką JavaScript i wyświetlić wszystkie dane w formacie tabelarycznym za pomocą techniki Ajax, bez przeładowywania strony.

A więc dziś omówimy:

·        Znajomość Ajaksu

·        Dlaczego używany jest Ajax?

·        Kroki pobierania danych bez odświeżania strony za pomocą Ajax i PHP

ZNAJOMOŚĆ AJAXA 

Ajax to zestaw technik tworzenia stron internetowych wykorzystujących wiele technologii internetowych po stronie klienta do tworzenia asynchronicznych aplikacji internetowych. Dzięki technologii Ajax aplikacje internetowe mogą asynchronicznie wysyłać i pobierać dane z serwera bez ingerencji w wyświetlanie i zachowanie istniejącej strony. XML to język znaczników, co oznacza, że ​​są to zakodowane języki do opisywania części dokumentu internetowego, który zawiera instrukcje dla przeglądarek internetowych dotyczące zrozumienia i wyświetlania treści użytkownika. Łączy różne narzędzia programistyczne, takie jak JavaScript, HTML, DHTML, XML, CSS, DOM i obiekt Microsoft.

Ajax został opracowany przez Microsoft Outlook Web Applications w 1999 roku, ale pełne wykorzystanie Ajaxu pojawiło się po 6 latach. Jesse James Garrett nadał nazwę Ajax w lutym 2005. Akronim Ajax to Asynchronous JavaScript and XML. Można go zdefiniować jako ścieżkę, w której użytkownik używa JavaScript do komunikacji z serwerem WWW w celu uzyskania odpowiedzi wygenerowanej przez zapytanie i dostarczenia jej na serwerze WWW bez opuszczania bieżącej strony.

Jeśli chodzi o zalety Ajaksu, to:

• Umożliwia aplikacjom renderowanie bez danych i wypełnianie danych, gdy aplikacja pobiera je z serwera.
• Zapewnia niezależność platformy programistom aplikacji.
•   Szybsze renderowanie stron.
• Bardziej responsywne aplikacje.
• Do zaktualizowania tylko jednego obszaru nie jest potrzebne ponowne renderowanie całych stron.
•   Wykorzystanie przepustowości można zmniejszyć.

DLACZEGO WYKORZYSTYWANY JEST AJAX?

Ajax jest długoterminowym marzeniem twórców stron internetowych, ponieważ pozwala użytkownikowi robić takie rzeczy jak:

• Żądanie użytkownika można zaktualizować bez przeładowywania strony.
• Po załadowaniu strona generuje dane z serwera.
• Odbierz dane z serwera po załadowaniu strony. 

Operacje, które wykonujemy to CRUD (tworzenie, odczyt, aktualizacja, usuwanie) na naszej stronie PHP.

 Kroki ułatwiające nasz formularz rejestracyjny : –

1. Utwórz interfejs API połączenia z naszą bazą danych.
2. Dodaj ten interfejs API do naszej strony Żądanie, na której prosimy o pobranie danych przez tę stronę i udzielenie odpowiedzi w formacie JSON i innym.
3. Utwórz stronę rejestracji.php / index.php według siebie, dobrą nazwę dla swojej strony.
4. I utwórz plik javascript.js do skryptowania i dla ajax do żądania i pobierania danych z bazy danych.
5. Po pobraniu danych ze strony żądania wyświetl je w naszej tabeli rejestracyjnej.

1) Utwórz interfejs API połączenia z bazą danych

Przede wszystkim musisz połączyć PHP z bazą danych MYSQL. 

Nazwa pliku – Config.php

<?php

// for local server database

$server = "localhost";

$database = "emp";

$user = "root";

$password = "";

  

$conn = new mysqli($server, $user, $password, $database);

if ($conn->connect_error) {

    echo "error in connection";

} else {

      echo "error in Successfully";

}

2) Poproś stronę o pobranie/pobranie z bazy danych i wyślij odpowiedź w formacie json .

Nazwa pliku:- Request.php

<?php

Require ‘config.php’;

if ($conn->connect_error) {

    echo "error in connection";

} else {

    // Read POST data

    $data = json_decode(file_get_contents("php://input"));

    if ($data) {

        if (!$data->action) {

            $fname = $data->fname;

            $lname = $data->lname;

            $email = $data->email;

            $password = $data->password;

            $number = $data->number;

 

$query_insert = "INSERT INTO reg (srno,fname,lname,email,password,phone) value(null , '$fname','$lname','$email','$password','$number')";

 

            $result = mysqli_query($conn, $query_insert);

 

            if (mysqli_error($conn)) {

                echo 'Error in query';

            } else {

                echo 'Data inserted in database successfully';

            }

        } else {

 

            $srno = $data->srno;

            $fname = $data->fname;

            $lname = $data->lname;

            $email = $data->email;

            $number = $data->number;

            $query_up = "UPDATE `reg` SET`fname`='$fname',`lname`='$lname',`email`='$email',`phone`='$number' WHERE srno = $srno";

 

            $result = mysqli_query($conn, $query_up);

 

            if (mysqli_error($conn)) {

                echo 'Error in updation';

            } else {

                echo 'Data updated in database successfully';

            }

        }

    }

 

    if (isset($_GET['show'])) {

        $query_show = "SELECT * FROM reg";

        $result = mysqli_query($conn, $query_show);

        $data = array();

        if (mysqli_num_rows($result) > 0) {

            while ($row = mysqli_fetch_assoc($result)) {

                $data[] = $row;

            }

            echo json_encode($data);

        }

    }

 

    if (isset($_GET['id'])) {

        $id = $_GET['id'];

        $query_del = "DELETE FROM `reg` WHERE srno = $id";

 

        $result = mysqli_query($conn, $query_del);

        if (!mysqli_error($conn)) {

            echo "Data Deleted successfully";

        } else {

            echo "Error";

        }

    }

}

?> 

3) Utwórz plik Registration.php /Index.php do interakcji z użytkownikiem.

Nazwa pliku:-Registration.php 

W tym pliku dołączamy formularz do rejestracji w celu uwzględnienia danych użytkownika w bazie danych przy użyciu technik ajax oraz wykonania kilku dodatkowych rzeczy, takich jak struktura tabeli do wyświetlania wszystkich danych oraz przyciski do aktualizacji wiersza i usuwania wiersza z tabeli za pomocą technika ajaksowa.

4) Używanie Ajax do wstawiania danych do bazy danych.

Kod do wstawiania danych do bazy danych za pomocą Ajax.

var f_name = document.forms['reg_form']['fname'].value;

 var l_name = document.forms['reg_form']['lname'].value;

 var email = document.forms['reg_form']['email'].value;

 var password = document.forms['reg_form']['password'].value;

 var number = document.forms['reg_form']['phone'].value;

 

            let data = {

                fname: f_name,

                lname: l_name,

                email: email,

                password: password,

                number: number,

                action_insert: true

            }

 

 let ajax = new XMLHttpRequest();

 ajax.open("POST", "Requst.php", true);

//insert .php content already insert query for insertion.

 ajax.setRequestHeader("Content-Type", "application/json");

 ajax.onload = () => {

if (ajax.responseText == "Data inserted in database successfully"){

document.getElementById('succ_box').innerText = ajax.responseText;

       remove_item();

       showData();

} else {

document.getElementById('succ_box').innerText = ajax.responseText;

        }

   }

            ajax.send(JSON.stringify(data));

Uwaga: – Request.php zawiera już zapytanie do wykonywania operacji na bazie danych.

Podobnie, wykonujemy tę samą technikę, aby wyświetlać, aktualizować i usuwać operacje za pomocą Ajax na naszej stronie PHP. W tej technice używamy Ajax do żądania wykonania określonej operacji po otrzymaniu odpowiedniej odpowiedzi z serwera. Dostarczamy tę odpowiedź do przeglądarki klienta za pomocą JavaScript i PHP. 

WNIOSEK

Ajax zapewnia nowe metody i techniki komunikacji z twórcami stron internetowych i użytkownikami. Mamy nadzieję, że ten artykuł pomógł ci w nauce i zrozumieniu kroków pobierania danych za pomocą Ajax bez większych trudności.