Změna a uložení uživatelských dat mysql v tabulce zobrazení, která zobrazuje data uživatele

Pomocí ajaxu základní:

Některé základní pojmy na straně serveru a straně klienta;
Ned nějaké základní pojmy javascript (jquery);
A některé základy HTML a javascriptu.

Pro první část:

Programování na straně serveru je psaní kódu, který běží na serveru, pomocí jazyků podporovaných serverem (jako je Java, PHP, C#; je možné napsat kód, který se spouští na straně serveru v JavaScriptu). Programování na straně klienta je psaní kódu, který poběží na klientovi a provádí se v jazycích, které může prohlížeč spustit, jako je JavaScript, html a css.

Za druhé:

U ajaxu je důležité deklarovat jádro jQuery.

Příklad:

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

Použijte poslední verzi jQuery Core.

Mějte představu o tom, kdo AJAX funguje.

Ajax pracuje takto:

Na webové stránce dojde k události (stránka se načte, klikne se na tlačítko)
Objekt XMLHttpRequest je vytvořen JavaScriptem
Objekt XMLHttpRequest odešle požadavek na webový server
Server požadavek zpracuje
Server odešle odpověď zpět na webovou stránku
Odpověď je čtena pomocí JavaScriptu
Správnou akci (např. aktualizaci stránky) provádí JavaScript

Pro více použijte tento odkaz:https://www.w3schools.com/xml/ajax_intro.asp

Nakonfigurujte požadavek:

url:

Typ:Řetězec

Popis:Řetězec obsahující adresu URL, na kterou je požadavek odeslán.

údaje:

Typ:PlainObject nebo String nebo Array

Popis:Data k odeslání na server. Je převeden na řetězec dotazu, pokud již není řetězec. Je připojen k adrese URL pro požadavky GET. Chcete-li tomuto automatickému zpracování zabránit, viz možnost processData. Objekt musí být páry klíč/hodnota. Pokud je hodnota pole, jQuery serializuje více hodnot se stejným klíčem na základě hodnoty tradičního nastavení (popsáno níže).

dataType (výchozí:Intelligent Guess (xml, json, skript nebo html)):

Typ:Řetězec

Popis:Typ dat, která očekáváte zpět od serveru. Není-li zadána žádná, jQuery se ji pokusí odvodit na základě typu MIME odpovědi (typ MIME XML poskytne XML, ve verzi 1.4 JSON poskytne objekt JavaScriptu, ve skriptu 1.4 skript spustí a vše ostatní bude vráceno jako řetězec). Dostupné typy (a výsledek předaný jako první argument vašeho úspěšného zpětného volání) jsou:

xml:Vrátí dokument XML, který lze zpracovat pomocí jQuery.

html:Vrátí HTML jako prostý text; zahrnuté značky skriptu jsou vyhodnoceny při vložení do DOM.

skript:Vyhodnotí odpověď jako JavaScript a vrátí ji jako prostý text. Zakáže ukládání do mezipaměti připojením parametru řetězce dotazu, _=[TIMESTAMP], k adrese URL, pokud není možnost mezipaměti nastavena na hodnotu true. Poznámka:Toto změní POST na GET pro požadavky vzdálené domény.

json:Vyhodnotí odpověď jako JSON a vrátí objekt JavaScriptu. Požadavky „json“ napříč doménami jsou převedeny na „jsonp“, pokud požadavek neobsahuje ve svých možnostech požadavku jsonp:false. Data JSON jsou analyzována striktním způsobem; jakýkoli chybně formátovaný JSON je odmítnut a je vyvolána chyba analýzy. Od jQuery 1.9 je také odmítnuta prázdná odpověď; server by měl místo toho vrátit odpověď null nebo {}. (Další informace o správném formátování JSON najdete na json.org.) jsonp:Načte se do bloku JSON pomocí JSONP. Přidá další "?callback=?" na konec vaší adresy URL a zadejte zpětné volání. Zakáže ukládání do mezipaměti připojením parametru řetězce dotazu „_=[TIMESTAMP]“ k adrese URL, pokud není možnost mezipaměti nastavena na true.text:Řetězec ve formátu prostého textu.více hodnot oddělených mezerami:Od verze jQuery 1.5 může jQuery převeďte dataType z toho, co obdržel v záhlaví Content-Type, na to, co požadujete. Pokud například chcete, aby se s textovou odpovědí zacházelo jako s XML, použijte jako datový typ „text xml“. Můžete také vytvořit požadavek JSONP, nechat jej přijmout jako text a interpretovat jQuery jako XML:„jsonp text xml“. Podobně zkrácený řetězec, jako je "jsonp xml", se nejprve pokusí převést z jsonp na xml, a pokud se tak nestane, převést z jsonp na text a poté z textu na xml.

typ (výchozí:'GET'):

Typ:Řetězec

Popis:Metoda HTTP, která se má pro požadavek použít (např. „POST“, „GET“, „PUT“). (přidaná verze:1.9.0)

úspěch:

Typ:Funkce (Cokoli data, Řetězec TextStatus, jqXHR jqXHR)

Popis:Funkce, která se má volat, pokud je požadavek úspěšný. Funkce obdrží tři argumenty:Data vrácená ze serveru, naformátovaná podle parametru dataType nebo funkce zpětného volání dataFilter, je-li zadána; řetězec popisující stav; a objekt jqXHR (v jQuery 1.4.x, XMLHttpRequest). Od jQuery 1.5 může nastavení úspěchu přijímat řadu funkcí. Každá funkce bude volána postupně. Toto je událost Ajax.

Pro více informací o konfiguraci použijte odkaz:http://api.jquery.com/jquery.ajax /

Příklad:

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.

Pro třetí a poslední část:

Jak volat funkci javascript z html a předat parametr mezi nimi. Použijte tento odkaz:jak volat funkci javascript z html a předat přes ni parametr

Úplný pracovní příklad:

<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 na straně serveru (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>

Máte-li pochybnosti, požádejte mě o pomoc.

Dobrá práce! A nezapomeňte přijmout odpověď, pokud to pomůže.