Zmiana i zapisywanie danych użytkownika mysql w widoku Tabela wyświetlająca dane użytkownika

Używając ajaxu podstawowe:

Kilka podstawowych pojęć po stronie serwera i po stronie klienta;
Potrzebujesz kilku podstawowych pojęć javascript (jquery);
I trochę podstaw html i javascript.

W pierwszej części:

Programowanie po stronie serwera to pisanie kodu, który działa na serwerze, przy użyciu języków obsługiwanych przez serwer (takich jak Java, PHP, C#; możliwe jest napisanie kodu, który wykonuje się po stronie serwera w JavaScript). Programowanie po stronie klienta polega na pisaniu kodu, który będzie działał na kliencie i jest wykonywany w językach, które mogą być wykonywane przez przeglądarkę, takich jak JavaScript, html i css.

Po drugie:

Ajax, ważne jest, aby zadeklarować rdzeń jQuery.

Przykład:

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

Użyj ostatniej wersji jQuery Core.

Miej pojęcie, kto działa AJAX.

Ajax działa wykonując następujące kroki:

Zdarzenie ma miejsce na stronie internetowej (strona jest ładowana, przycisk jest klikany)
Obiekt XMLHttpRequest jest tworzony przez JavaScript
Obiekt XMLHttpRequest wysyła żądanie do serwera WWW
Serwer przetwarza żądanie
Serwer wysyła odpowiedź z powrotem do strony internetowej
Odpowiedź jest odczytywana przez JavaScript
Właściwe działanie (np. aktualizacja strony) jest wykonywane przez JavaScript

Więcej informacji Użyj tego linku:https://www.w3schools.com/xml/ajax_intro.asp

Skonfiguruj żądanie:

adres URL:

Typ:ciąg

Opis:ciąg znaków zawierający adres URL, na który wysyłane jest żądanie.

dane:

Typ:PlainObject lub String lub Array

Opis:Dane do wysłania na serwer. Jest konwertowany na ciąg zapytania, jeśli nie jest już ciągiem. Jest dołączany do adresu URL żądań GET. Zobacz opcję processData, aby zapobiec automatycznemu przetwarzaniu. Obiekt musi być parami klucz/wartość. Jeśli wartość jest tablicą, jQuery serializuje wiele wartości z tym samym kluczem na podstawie wartości ustawienia tradycyjnego (opisanego poniżej).

dataType (domyślnie:Intelligent Guess (xml, json, script lub html)):

Typ:ciąg

Opis:typ danych, których oczekujesz z powrotem z serwera. Jeśli żaden nie zostanie określony, jQuery spróbuje wywnioskować to na podstawie typu MIME odpowiedzi (typ MIME XML da XML, w 1.4 JSON zwróci obiekt JavaScript, w 1.4 skrypt wykona skrypt, a wszystko inne zostanie zwrócony jako ciąg). Dostępne typy (oraz wynik przekazany jako pierwszy argument w wywołaniu zwrotnym powodzenia) to:

xml:Zwraca dokument XML, który może być przetwarzany przez jQuery.

html:Zwraca HTML jako zwykły tekst; dołączone tagi skryptu są oceniane po wstawieniu do DOM.

skrypt:ocenia odpowiedź jako JavaScript i zwraca ją jako zwykły tekst. Wyłącza buforowanie, dołączając parametr ciągu zapytania _=[TIMESTAMP] do adresu URL, chyba że opcja pamięci podręcznej jest ustawiona na true. Uwaga:to zmieni POST w GET dla żądań domeny zdalnej.

json:ocenia odpowiedź jako JSON i zwraca obiekt JavaScript. Żądania międzydomenowe „json” są konwertowane na „jsonp”, chyba że żądanie zawierajsonp:false w opcjach żądania. Dane JSON są analizowane w ścisły sposób; wszelkie zniekształcone pliki JSON są odrzucane i zgłaszany jest błąd analizy. Od wersji jQuery 1.9 odrzucana jest również pusta odpowiedź; serwer powinien zamiast tego zwrócić odpowiedź null lub {}. (Zobacz json.org, aby uzyskać więcej informacji na temat prawidłowego formatowania JSON.) jsonp:ładuje się w bloku JSON przy użyciu JSONP. Dodaje dodatkowe „?callback=?” na końcu adresu URL, aby określić wywołanie zwrotne. Wyłącza buforowanie, dołączając parametr ciągu zapytania „_=[TIMESTAMP]” do adresu URL, chyba że opcja pamięci podręcznej jest ustawiona na true.text:zwykły tekst string.multiple, wartości oddzielone spacjami:od jQuery 1.5, jQuery może przekonwertuj dataType z tego, co otrzymał w nagłówku Content-Type na to, czego potrzebujesz. Na przykład, jeśli chcesz, aby odpowiedź tekstowa była traktowana jako XML, użyj „text xml” jako dataType. Możesz również złożyć żądanie JSONP, otrzymać je jako tekst i zinterpretować przez jQuery jako XML:"jsonp text xml". Podobnie, skrócony ciąg, taki jak „jsonp xml”, najpierw spróbuje przekonwertować z jsonp na xml, a jeśli to się nie powiedzie, przekonwertuje go z jsonp na tekst, a następnie z tekstu na xml.

typ (domyślnie:'GET'):

Typ:ciąg

Opis:metoda HTTP używana dla żądania (np. „POST”, „GET”, „PUT”). (dodana wersja:1.9.0)

sukces:

Typ:Funkcja( Dowolne dane, String textStatus, jqXHR jqXHR )

Opis:funkcja, która zostanie wywołana, jeśli żądanie się powiedzie. Funkcja otrzymuje trzy argumenty:Dane zwrócone z serwera, sformatowane zgodnie z parametrem dataType lub funkcją wywołania zwrotnego dataFilter, jeśli została określona; ciąg opisujący status; oraz obiekt jqXHR (w jQuery 1.4.x, XMLHttpRequest). Począwszy od jQuery 1.5, ustawienie sukcesu może akceptować szereg funkcji. Każda funkcja zostanie wywołana po kolei. To jest wydarzenie Ajax.

Więcej informacji na temat konfiguracji znajdziesz pod linkiem:http://api.jquery.com/jquery.ajax /

Przykład:

AJAX:

$.ajax({
        url: 'test.php',
        type: 'POST',
        datatype: 'Json',
        data: {'var1': val_1, 'var2': val_2},
        success: function (response) {
           $('.search-results').html(response);
        }
});

PHP:

$val = $_POST['var1'];//recive the values from ajax
$val = $_POST['var2'];
...// The code to recive and create html code.
echo json_encode($html);//send values back to the main page.

W trzeciej i ostatniej części:

Jak wywołać funkcję javascript z html i przekazać parametr między nimi. Użyj tego linku:jak wywołać funkcję javascript z html i przekazać przez nią parametr

Pełny przykład pracy:

<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>

<form>
<select name="users" onchange="showUser(this.value)">
  <option value="">Select a person:</option>
  <option value="1">Peter Griffin</option>
  <option value="2">Lois Griffin</option>
  <option value="3">Joseph Swanson</option>
  <option value="4">Glenn Quagmire</option>
  </select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
<script>
   function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
       var var_1 = 
       $.ajax({
        url: 'test.php',
        type: 'POST',
        datatype: 'Json',
        data: {'q': str},
        success: function (response) {
          if(response.error_state = ""){
             document.getElementById("txtHint").innerHTML = response.html;
          }
          else{
             document.getElementById("txtHint").innerHTML = response.response.error_state;
          }
        }
});
    }
}
</script>
</body>
</html>

PHP po stronie serwera (teste.php):

<!DOCTYPE html>
<html>
<head>
<style>
table {
    width: 100%;
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
    padding: 5px;
}

th {text-align: left;}
</style>
</head>
<body>

<?php
$q = intval($_POST['q']);
$error_state = "";
$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con) {
    //die('Could not connect: ' . mysqli_error($con));
    $error_state = "<p>"."Could not connect:". mysqli_error($con)."</p>";
}

mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);

$html = "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
    $html = $html. "<tr>";
    $html = $html. "<td>" . $row['FirstName'] . "</td>";
    $html = $html. "<td>" . $row['LastName'] . "</td>";
    $html = $html. "<td>" . $row['Age'] . "</td>";
    $html = $html. "<td>" . $row['Hometown'] . "</td>";
    $html = $html. "<td>" . $row['Job'] . "</td>";
    $html = $html. "</tr>";
}
$html = $html. "</table>";
mysqli_close($con);
echo json_encode (array(
                    'html'=>$html,
                    'error_state'=>$error_state
));
?>
</body>
</html>

Jeśli masz jakiekolwiek wątpliwości, poproś o moją pomoc.

Dobra robota! I nie zapomnij zaakceptować odpowiedzi, jeśli to pomoże.