Mysql-gebruikersgegevens wijzigen en opslaan in een weergavetabel die de gegevens van een gebruiker weergeeft

Ajax de basis gebruiken:

Enkele basisbegrippen van de serverzijde en de clientzijde;
Ned wat basis javascript(jquery) begrippen;
En wat basiskennis van html en javascript.

Voor het eerste deel:

Programmeren aan de serverzijde is het schrijven van code die op de server wordt uitgevoerd, met behulp van talen die door de server worden ondersteund (zoals Java, PHP, C#; het is mogelijk om code te schrijven die op de server wordt uitgevoerd in JavaScript). Programmeren aan de clientzijde is het schrijven van code die op de client wordt uitgevoerd en in talen die door de browser kunnen worden uitgevoerd, zoals JavaScript, html en css.

Voor de tweede:

De ajax het is belangrijk om de jQuery Core aan te geven.

Voorbeeld:

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

Gebruik de laatste versie jQuery Core.

Heb een idee van wie de AJAX werkt.

Ajax werkt met deze stappen:

Er vindt een gebeurtenis plaats op een webpagina (de pagina wordt geladen, er wordt op een knop geklikt)
Een XMLHttpRequest-object wordt gemaakt door JavaScript
Het XMLHttpRequest-object stuurt een verzoek naar een webserver
De server verwerkt het verzoek
De server stuurt een reactie terug naar de webpagina
Het antwoord wordt gelezen door JavaScript
De juiste actie (zoals pagina-update) wordt uitgevoerd door JavaScript

Gebruik deze link voor meer informatie:https://www.w3schools.com/xml/ajax_intro.asp

Configureer het verzoek:

url:

Type:String

Beschrijving:een tekenreeks die de URL bevat waarnaar het verzoek wordt verzonden.

gegevens:

Type:PlainObject of String of Array

Beschrijving:gegevens die naar de server moeten worden verzonden. Het wordt geconverteerd naar een querytekenreeks, zo niet al een tekenreeks. Het wordt toegevoegd aan de url voor GET-verzoeken. Zie processData optie om deze automatische verwerking te voorkomen. Object moet sleutel/waarde-paren zijn. Als waarde een array is, serialiseert jQuery meerdere waarden met dezelfde sleutel op basis van de waarde van de traditionele instelling (hieronder beschreven).

dataType (standaard:Intelligent Guess (xml, json, script of html)):

Type:String

Beschrijving:het type gegevens dat u van de server verwacht. Als er geen is gespecificeerd, zal jQuery proberen het af te leiden op basis van het MIME-type van het antwoord (een XML MIME-type levert XML op, in 1.4 zal JSON een JavaScript-object opleveren, in 1.4 zal script het script uitvoeren en al het andere zal worden geretourneerd als een tekenreeks). De beschikbare typen (en het resultaat dat is doorgegeven als het eerste argument voor uw succesvolle callback) zijn:

xml:Retourneert een XML-document dat kan worden verwerkt via jQuery.

html:retourneert HTML als platte tekst; opgenomen scripttags worden geëvalueerd wanneer ze in de DOM worden ingevoegd.

script:evalueert het antwoord als JavaScript en retourneert het als platte tekst. Schakelt caching uit door een queryreeksparameter, _=[TIMESTAMP], toe te voegen aan de URL, tenzij de cache-optie is ingesteld op true. Opmerking:hierdoor worden POST's omgezet in GET's voor externe domeinverzoeken.

json:Evalueert het antwoord als JSON en retourneert een JavaScript-object. "json"-verzoeken voor meerdere domeinen worden geconverteerd naar "jsonp", tenzij het verzoek jsonp:false in de verzoekopties bevat. De JSON-gegevens worden op een strikte manier geparseerd; elke misvormde JSON wordt afgewezen en er wordt een parseerfout gegenereerd. Vanaf jQuery 1.9 wordt een leeg antwoord ook afgewezen; de server zou in plaats daarvan een antwoord van null of {} moeten retourneren. (Zie json.org voor meer informatie over de juiste JSON-opmaak.)jsonp:laadt in een JSON-blok met behulp van JSONP. Voegt een extra "?callback=?" toe aan het einde van uw URL om de callback te specificeren. Schakelt caching uit door een queryreeksparameter, "_=[TIMESTAMP]", toe te voegen aan de URL, tenzij de cache-optie is ingesteld op true.text:Een tekenreeks zonder opmaak. meerdere, door spaties gescheiden waarden:vanaf jQuery 1.5 kan jQuery converteer een dataType van wat het heeft ontvangen in de Content-Type-header naar wat je nodig hebt. Als u bijvoorbeeld wilt dat een tekstantwoord als XML wordt behandeld, gebruikt u "text xml" voor het dataType. U kunt ook een JSONP-verzoek doen, het als tekst laten ontvangen en door jQuery als XML laten interpreteren:"jsonp text xml". Op dezelfde manier zal een verkorte tekenreeks zoals "jsonp xml" eerst proberen om van jsonp naar xml te converteren en, als dat niet lukt, van jsonp naar tekst en vervolgens van tekst naar xml.

type (standaard:'GET'):

Type:String

Beschrijving:de HTTP-methode die voor het verzoek moet worden gebruikt (bijv. "POST", "GET", "PUT"). (versie toegevoegd:1.9.0)

succes:

Type:Functie (Alles data, String textStatus, jqXHR jqXHR )

Beschrijving:een functie die moet worden aangeroepen als de aanvraag slaagt. De functie krijgt drie argumenten doorgegeven:De gegevens die door de server worden geretourneerd, geformatteerd volgens de parameter dataType of de callback-functie dataFilter, indien opgegeven; een string die de status beschrijft; en het jqXHR (in jQuery 1.4.x, XMLHttpRequest) object. Vanaf jQuery 1.5 kan de succesinstelling een reeks functies accepteren. Elke functie wordt om de beurt aangeroepen. Dit is een Ajax-evenement.

Gebruik de link voor meer informatie over configuratie:http://api.jquery.com/jquery.ajax /

Voorbeeld:

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.

Voor het derde en laatste deel:

Hoe de javascript-functie vanuit html aan te roepen en een parameter tussen de twee door te geven. Gebruik deze link:hoe de javascript-functie aan te roepen vanuit html en er een parameter doorheen te leiden

Een volledig werkend voorbeeld:

<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>

Server-side PHP (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>

Vraag bij twijfel mijn hulp.

Goed werk! En vergeet niet het antwoord te accepteren als het helpt.