Cambiar y guardar datos de usuario de mysql dentro de una tabla de vista que muestra los datos de un usuario

Usando ajax lo básico:

Algunas nociones básicas del lado del servidor y del lado del cliente;
Ned algunas nociones básicas de javascript (jquery);
Y algunos conceptos básicos de html y javascript.

Para la primera parte:

La programación del lado del servidor está escribiendo código que se ejecuta en el servidor, utilizando lenguajes admitidos por el servidor (como Java, PHP, C#; es posible escribir código que se ejecuta en el lado del servidor en JavaScript). La programación del lado del cliente consiste en escribir código que se ejecutará en el cliente y se realiza en lenguajes que el navegador puede ejecutar, como JavaScript, html y css.

Para el segundo:

El ajax es importante para declarar el jQuery Core.

Ejemplo:

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

Utilice la última versión de jQuery Core.

Tener la noción de quién trabaja el AJAX.

Ajax funciona siguiendo estos pasos:

Se produce un evento en una página web (la página se carga, se hace clic en un botón)
JavaScript crea un objeto XMLHttpRequest
El objeto XMLHttpRequest envía una solicitud a un servidor web
El servidor procesa la solicitud
El servidor envía una respuesta a la página web
La respuesta es leída por JavaScript
La acción adecuada (como la actualización de la página) la realiza JavaScript

Para obtener más información, use este enlace:https://www.w3schools.com/xml/ajax_intro.asp

Configure la Solicitud:

URL:

Tipo:Cadena

Descripción:una cadena que contiene la URL a la que se envía la solicitud.

datos:

Tipo:PlainObject o String o Array

Descripción:Datos a enviar al servidor. Se convierte en una cadena de consulta, si aún no es una cadena. Se adjunta a la URL para solicitudes GET. Consulte la opción processData para evitar este procesamiento automático. El objeto debe ser pares clave/valor. Si el valor es una matriz, jQuery serializa varios valores con la misma clave en función del valor de la configuración tradicional (descrito a continuación).

dataType (predeterminado:Intelligent Guess (xml, json, script o html)):

Tipo:Cadena

Descripción:el tipo de datos que espera recibir del servidor. Si no se especifica ninguno, jQuery intentará inferirlo en función del tipo MIME de la respuesta (un tipo XML MIME generará XML, en 1.4 JSON generará un objeto JavaScript, en 1.4 el script ejecutará el script y todo lo demás será devuelto como una cadena). Los tipos disponibles (y el resultado pasado como primer argumento para su devolución de llamada exitosa) son:

xml:Devuelve un documento XML que se puede procesar a través de jQuery.

html:Devuelve HTML como texto sin formato; las etiquetas de script incluidas se evalúan cuando se insertan en el DOM.

script:evalúa la respuesta como JavaScript y la devuelve como texto sin formato. Inhabilita el almacenamiento en caché agregando un parámetro de cadena de consulta, _=[TIMESTAMP], a la URL, a menos que la opción de caché se establezca en verdadero. Nota:Esto convertirá los POST en GET para solicitudes de dominio remoto.

json:evalúa la respuesta como JSON y devuelve un objeto JavaScript. Las solicitudes "json" entre dominios se convierten en "jsonp" a menos que la solicitud incluya jsonp:false en sus opciones de solicitud. Los datos JSON se analizan de manera estricta; cualquier JSON con formato incorrecto se rechaza y se genera un error de análisis. A partir de jQuery 1.9, también se rechaza una respuesta vacía; el servidor debería devolver una respuesta nula o {} en su lugar. (Consulte json.org para obtener más información sobre el formato JSON adecuado). jsonp:se carga en un bloque JSON mediante JSONP. Agrega un extra "? Callback =?" al final de su URL para especificar la devolución de llamada. Deshabilita el almacenamiento en caché agregando un parámetro de cadena de consulta, "_=[TIMESTAMP]", a la URL, a menos que la opción de caché esté establecida en true.text:una cadena de texto sin formato.múltiples valores separados por espacios:a partir de jQuery convierta un tipo de datos de lo que recibió en el encabezado de tipo de contenido a lo que necesita. Por ejemplo, si desea que una respuesta de texto se trate como XML, use "texto xml" para el tipo de datos. También puede realizar una solicitud JSONP, recibirla como texto e interpretarla mediante jQuery como XML:"jsonp text xml". De manera similar, una cadena abreviada como "jsonp xml" primero intentará convertir de jsonp a xml y, en caso de fallar, convertirá de jsonp a texto y luego de texto a xml.

tipo (predeterminado:'GET'):

Tipo:Cadena

Descripción:el método HTTP que se usará para la solicitud (por ejemplo, "POST", "GET", "PUT"). (versión añadida:1.9.0)

éxito:

Tipo:Función (Cualquier dato, String textStatus, jqXHR jqXHR)

Descripción:una función que se llamará si la solicitud tiene éxito. A la función se le pasan tres argumentos:los datos devueltos por el servidor, formateados según el parámetro dataType o la función de devolución de llamada dataFilter, si se especifica; una cadena que describe el estado; y el objeto jqXHR (en jQuery 1.4.x, XMLHttpRequest). A partir de jQuery 1.5, la configuración de éxito puede aceptar una variedad de funciones. Cada función será llamada a su vez. Este es un evento de Ajax.

Para obtener más información sobre la configuración, use el enlace:http://api.jquery.com/jquery.ajax //a>

Ejemplo:

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.

Para la tercera y última parte:

Cómo llamar a la función javascript desde html y pasar parámetros entre los dos. Use este enlace:cómo llamar a la función javascript desde html y pasar parámetros a través de ella

Un ejemplo de trabajo completo:

<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 del lado del servidor (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>

Cualquier duda, solo pide mi ayuda.

¡Buen trabajo! Y no olvides aceptar la respuesta si te ayuda.