Mysql
 sql >> Datenbank >  >> RDS >> Mysql

Ändern und Speichern von MySQL-Benutzerdaten innerhalb einer Ansichtstabelle, die die Daten eines Benutzers anzeigt

Mit Ajax das grundlegende:

  • Einige grundlegende Begriffe von Serverseite und Clientseite;

  • Benötigt einige grundlegende Javascript(jquery)-Begriffe;

  • Und einige HTML- und Javascript-Grundlagen.

Für den ersten Teil:

Serverseitige Programmierung ist das Schreiben von Code, der auf dem Server ausgeführt wird, unter Verwendung von Sprachen, die vom Server unterstützt werden (z. B. Java, PHP, C#; es ist möglich, Code zu schreiben, der auf der Serverseite in JavaScript ausgeführt wird). Clientseitige Programmierung ist das Schreiben von Code, der auf dem Client ausgeführt wird, und erfolgt in Sprachen, die vom Browser ausgeführt werden können, wie z. B. JavaScript, HTML und CSS.

Für die zweite:

Beim Ajax ist es wichtig, den jQuery Core zu deklarieren.

Beispiel:

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

Verwenden Sie die letzte Version von jQuery Core.

Haben Sie eine Vorstellung davon, wer AJAX funktioniert.

Ajax funktioniert mit diesen Schritten:

  1. Ein Ereignis tritt auf einer Webseite auf (die Seite wird geladen, eine Schaltfläche wird angeklickt)
  2. Ein XMLHttpRequest-Objekt wird von JavaScript erstellt
  3. Das XMLHttpRequest-Objekt sendet eine Anfrage an einen Webserver
  4. Der Server verarbeitet die Anfrage
  5. Der Server sendet eine Antwort zurück an die Webseite
  6. Die Antwort wird von JavaScript gelesen
  7. Die richtige Aktion (wie Seitenaktualisierung) wird von JavaScript ausgeführt

Weitere Informationen finden Sie unter diesem Link:https://www.w3schools.com/xml/ajax_intro.asp

Konfigurieren Sie die Anfrage:

url:

Typ:Zeichenkette

Beschreibung:Ein String, der die URL enthält, an die die Anfrage gesendet wird.

Daten:

Typ:PlainObject oder String oder Array

Beschreibung:An den Server zu sendende Daten. Es wird in eine Abfragezeichenfolge konvertiert, falls dies nicht bereits eine Zeichenfolge ist. Es wird an die URL für GET-Anfragen angehängt. Siehe die Option processData, um diese automatische Verarbeitung zu verhindern. Das Objekt muss aus Schlüssel/Wert-Paaren bestehen. Wenn value ein Array ist, serialisiert jQuery mehrere Werte mit demselben Schlüssel basierend auf dem Wert der traditionellen Einstellung (unten beschrieben).

dataType (Standard:Intelligent Guess (xml, json, script oder html)):

Typ:Zeichenkette

Beschreibung:Der Datentyp, den Sie vom Server zurückerwarten. Wenn nichts angegeben ist, versucht jQuery, es basierend auf dem MIME-Typ der Antwort abzuleiten (ein XML-MIME-Typ ergibt XML, in 1.4 ergibt JSON ein JavaScript-Objekt, in 1.4 führt Skript das Skript aus und alles andere wird es sein als String zurückgegeben). Die verfügbaren Typen (und das als erstes Argument an Ihren Erfolgsrückruf übergebene Ergebnis) sind:

xml:Gibt ein XML-Dokument zurück, das über jQuery verarbeitet werden kann.

html:gibt HTML als reinen Text zurück; Eingeschlossene Skript-Tags werden beim Einfügen in das DOM ausgewertet.

script:Wertet die Antwort als JavaScript aus und gibt sie als Klartext zurück. Deaktiviert das Caching durch Anhängen eines Abfragezeichenfolgeparameters, _=[TIMESTAMP], an die URL, es sei denn, die Cache-Option ist auf „true“ gesetzt. Hinweis:Dadurch werden POSTs in GETs für Remote-Domain-Anfragen umgewandelt.

json:Wertet die Antwort als JSON aus und gibt ein JavaScript-Objekt zurück. Domänenübergreifende „json“-Anforderungen werden in „jsonp“ konvertiert, es sei denn, die Anforderung enthält jsonp:false in ihren Anforderungsoptionen. Die JSON-Daten werden strikt analysiert; jedes fehlerhafte JSON wird zurückgewiesen und ein Parsing-Fehler ausgegeben. Ab jQuery 1.9 wird auch eine leere Antwort abgewiesen; Der Server sollte stattdessen eine Antwort von null oder {} zurückgeben. (Weitere Informationen zur richtigen JSON-Formatierung finden Sie unter json.org.) jsonp:Lädt einen JSON-Block mit JSONP. Fügt ein zusätzliches "?callback=" an das Ende Ihrer URL, um den Rückruf anzugeben. Deaktiviert das Caching durch Anhängen eines Abfrage-String-Parameters „_=[TIMESTAMP]“ an die URL, es sei denn, die Cache-Option ist auf „true“ gesetzt Konvertieren Sie einen dataType von dem, was er im Content-Type-Header erhalten hat, in das, was Sie benötigen. Wenn Sie beispielsweise möchten, dass eine Textantwort als XML behandelt wird, verwenden Sie „text xml“ für den Datentyp. Sie können auch eine JSONP-Anfrage stellen, diese als Text empfangen und von jQuery als XML interpretieren lassen:„jsonp text xml“. Ebenso wird eine Kurzzeichenfolge wie „jsonp xml“ zuerst versuchen, von jsonp in xml zu konvertieren und, falls dies fehlschlägt, von jsonp in text und dann von text in xml zu konvertieren.

Typ (Standard:'GET'):

Typ:Zeichenkette

Beschreibung:Die für die Anfrage zu verwendende HTTP-Methode (z. B. „POST“, „GET“, „PUT“). (Version hinzugefügt:1.9.0)

Erfolg:

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

Beschreibung:Eine Funktion, die aufgerufen wird, wenn die Anforderung erfolgreich ist. Der Funktion werden drei Argumente übergeben:Die vom Server zurückgegebenen Daten, formatiert gemäß dem dataType-Parameter oder der dataFilter-Callback-Funktion, falls angegeben; eine Zeichenfolge, die den Status beschreibt; und das Objekt jqXHR (in jQuery 1.4.x, XMLHttpRequest). Ab jQuery 1.5 kann die Erfolgseinstellung eine Reihe von Funktionen akzeptieren. Jede Funktion wird der Reihe nach aufgerufen. Dies ist ein Ajax-Ereignis.

Für weitere Informationen zur Konfiguration verwenden Sie den Link:http://api.jquery.com/jquery.ajax /

Beispiel:

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 dritten und letzten Teil:

Ein voll funktionsfähiges Beispiel:

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

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

Fragen Sie im Zweifelsfall einfach um meine Hilfe.

Gute Arbeit! Und vergessen Sie nicht, die Antwort zu akzeptieren, wenn sie hilft.