Ändra och spara mysql-användardata i en vytabell som visar en användares data

Använda ajax den grundläggande:

Några grundläggande begrepp om serversidan och klientsidan;
Ned några grundläggande javascript(jquery) begrepp;
Och lite html och javascript grunderna.

För den första delen:

Programmering på serversidan är att skriva kod som körs på servern, med hjälp av språk som stöds av servern (som Java, PHP, C#; det är möjligt att skriva kod som körs på serversidan i JavaScript). Programmering på klientsidan är att skriva kod som körs på klienten och görs på språk som kan köras av webbläsaren, som JavaScript, html och css.

För det andra:

Ajax är det viktigt att deklarera jQuery Core.

Exempel:

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

Använd den senaste versionen av jQuery Core.

Ha en uppfattning om vem AJAX fungerar.

Ajax arbetar med följande steg:

En händelse inträffar på en webbsida (sidan laddas, en knapp klickas)
Ett XMLHttpRequest-objekt skapas av JavaScript
XMLHttpRequest-objektet skickar en begäran till en webbserver
Servern behandlar begäran
Servern skickar ett svar tillbaka till webbsidan
Svaret läses av JavaScript
Rätt åtgärd (som siduppdatering) utförs av JavaScript

För mer Använd denna länk:https://www.w3schools.com/xml/ajax_intro.asp

Konfigurera begäran:

url:

Typ:Sträng

Beskrivning:En sträng som innehåller URL:en som begäran skickas till.

data:

Typ:PlainObject eller String eller Array

Beskrivning:Data som ska skickas till servern. Den konverteras till en frågesträng, om den inte redan är en sträng. Den är bifogad till webbadressen för GET-förfrågningar. Se alternativet processData för att förhindra denna automatiska bearbetning. Objekt måste vara nyckel-/värdepar. Om värde är en Array, serialiserar jQuery flera värden med samma nyckel baserat på värdet för den traditionella inställningen (beskrivs nedan).

dataType (standard:Intelligent Guess (xml, json, script eller html)):

Typ:Sträng

Beskrivning:Den typ av data som du förväntar dig tillbaka från servern. Om ingen specificeras kommer jQuery att försöka härleda det baserat på MIME-typen för svaret (en XML MIME-typ kommer att ge XML, i 1.4 kommer JSON att ge ett JavaScript-objekt, i 1.4 kommer skriptet att exekvera skriptet och allt annat kommer att vara returneras som en sträng). De tillgängliga typerna (och resultatet som skickas som det första argumentet för din framgångsåteruppringning) är:

xml:Returnerar ett XML-dokument som kan bearbetas via jQuery.

html:Returnerar HTML som vanlig text; inkluderade skripttaggar utvärderas när de infogas i DOM.

script:Utvärderar svaret som JavaScript och returnerar det som vanlig text. Inaktiverar cachelagring genom att lägga till en frågesträngsparameter, _=[TIMESTAMP], till URL:en om inte cache-alternativet är inställt på sant. Obs! Detta kommer att förvandla POSTs till GETs för fjärrdomänförfrågningar.

json:Utvärderar svaret som JSON och returnerar ett JavaScript-objekt. "json"-förfrågningar över flera domäner konverteras till "jsonp" såvida inte begäran inkluderar jsonp:false i sina förfrågningsalternativ. JSON-data analyseras på ett strikt sätt; eventuellt felaktigt format JSON avvisas och ett analysfel uppstår. Från och med jQuery 1.9 avvisas också ett tomt svar; servern bör returnera svaret null eller {} istället. (Se json.org för mer information om korrekt JSON-formatering.)jsonp:Läser in ett JSON-block med JSONP. Lägger till ett extra "?återuppringning=?" till slutet av din URL för att ange återuppringningen. Inaktiverar cachelagring genom att lägga till en frågesträngsparameter, "_=[TIMESTAMP]", till URL:en om inte cache-alternativet är satt till true.text:En vanlig text string.multiple, mellanslagsseparerade värden:Från och med jQuery 1.5 kan jQuery konvertera en dataType från vad den fick i Content-Type-huvudet till vad du behöver. Om du till exempel vill att ett textsvar ska behandlas som XML, använd "text xml" för datatypen. Du kan också göra en JSONP-förfrågan, få den mottagen som text och tolkad av jQuery som XML:"jsonp text xml". På liknande sätt kommer en förkortad sträng som "jsonp xml" först att försöka konvertera från jsonp till xml, och, om det misslyckas, konvertera från jsonp till text och sedan från text till xml.

typ (standard:'GET'):

Typ:Sträng

Beskrivning:HTTP-metoden som ska användas för begäran (t.ex. "POST", "GET", "PUT"). (version tillagd:1.9.0)

framgång:

Typ:Function( Anything data, String textStatus, jqXHR jqXHR )

Beskrivning:En funktion som ska anropas om begäran lyckas. Funktionen passerar tre argument:Datan som returneras från servern, formaterad enligt dataType-parametern eller dataFilter-återuppringningsfunktionen, om den anges; en sträng som beskriver statusen; och objektet jqXHR (i jQuery 1.4.x, XMLHttpRequest). Från och med jQuery 1.5 kan framgångsinställningen acceptera en rad funktioner. Varje funktion kommer att anropas i tur och ordning. Det här är ett Ajax-evenemang.

För mer information om konfiguration, använd länken:http://api.jquery.com/jquery.ajax /

Exempel:

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.

För den tredje och sista delen:

Hur man anropar javascript-funktionen från html och skickar parametern mellan de två. Använd denna länk:hur man anropar javascript-funktionen från html och skickar parameter genom den

Ett fullständigt fungerande exempel:

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

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

Om du tvivlar, be bara om min hjälp.

Bra jobbat! Och glöm inte att acceptera svaret om det hjälper.