Промяна и запазване на потребителски данни на mysql в таблица за изглед, която показва потребителски данни

Използване на ajax основното:

Някои основни понятия от страна на сървъра и страна на клиента;
Необходими са някои основни понятия за javascript(jquery);
И някои основи на html и javascript.

За първата част:

Програмирането от страна на сървъра е писане на код, който се изпълнява на сървъра, като се използват езици, поддържани от сървъра (като Java, PHP, C#; възможно е да се напише код, който се изпълнява от страна на сървъра в JavaScript). Програмирането от страна на клиента е писане на код, който ще се изпълнява на клиента, и се извършва на езици, които могат да се изпълняват от браузъра, като JavaScript, html и css.

За второто:

Ajax е важно да се декларира jQuery Core.

Пример:

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

Използвайте последната версия на jQuery Core.

Имайте представа кой работи AJAX.

Ajax работи, изпълнявайки следните стъпки:

В уеб страница възниква събитие (страницата се зарежда, щраква се върху бутон)
Обект XMLHttpRequest се създава от JavaScript
Обектът XMLHttpRequest изпраща заявка до уеб сървър
Сървърът обработва заявката
Сървърът изпраща отговор обратно на уеб страницата
Отговорът се чете от JavaScript
Правилното действие (като актуализиране на страницата) се извършва от JavaScript

За повече използвайте тази връзка:https://www.w3schools.com/xml/ajax_intro.asp

Конфигурирайте заявката:

url:

Тип:низ

Описание:Низ, съдържащ URL адреса, до който е изпратена заявката.

данни:

Тип:PlainObject или String или Array

Описание:Данните за изпращане на сървъра. Преобразува се в низ на заявка, ако вече не е низ. Той е добавен към URL адреса за GET-заявки. Вижте опцията processData, за да предотвратите тази автоматична обработка. Обектът трябва да бъде двойки ключ/стойност. Ако стойността е масив, jQuery сериализира множество стойности с един и същ ключ въз основа на стойността на традиционната настройка (описана по-долу).

dataType (по подразбиране:Intelligent Guess (xml, json, скрипт или html)):

Тип:низ

Описание:Типът данни, които очаквате обратно от сървъра. Ако нищо не е посочено, jQuery ще се опита да го изведе въз основа на MIME типа на отговора (тип XML MIME ще даде XML, в 1.4 JSON ще даде обект на JavaScript, в 1.4 скрипт ще изпълни скрипта и всичко друго ще бъде върнати като низ). Наличните типове (и резултатът, предаден като първи аргумент за успешното ви обратно извикване) са:

xml:Връща XML документ, който може да бъде обработен чрез jQuery.

html:Връща HTML като обикновен текст; включените скриптови тагове се оценяват, когато се вмъкнат в DOM.

скрипт:Оценява отговора като JavaScript и го връща като обикновен текст. Деактивира кеширането чрез добавяне на параметър на низ на заявка, _=[TIMESTAMP], към URL адреса, освен ако опцията за кеширане не е зададена на true. Забележка:Това ще превърне POST в GET за заявки за отдалечен домейн.

json:Оценява отговора като JSON и връща JavaScript обект. Заявките „json“ между домейни се преобразуват в „jsonp“, освен ако заявката не включва jsonp:false в своите опции за заявка. JSON данните се анализират по строг начин; всеки неправилно оформен JSON се отхвърля и се извежда грешка при синтактичен анализ. От jQuery 1.9 празен отговор също се отхвърля; вместо това сървърът трябва да върне отговор null или {}. (Вижте json.org за повече информация относно правилното форматиране на JSON.) jsonp:Зарежда се в JSON блок с помощта на JSONP. Добавя допълнително "?callback=?" до края на вашия URL, за да посочите обратното извикване. Деактивира кеширането чрез добавяне на параметър на низ на заявка, "_=[TIMESTAMP]", към URL адреса, освен ако опцията за кеширане не е зададена на true.text:обикновен текстов низ.множество стойности, разделени с интервал:От jQuery 1.5, jQuery може конвертирайте dataType от това, което е получило в заглавката Content-Type, към това, което ви е необходимо. Например, ако искате текстов отговор да се третира като XML, използвайте "text xml" за dataType. Можете също да направите JSONP заявка, да я получите като текст и да интерпретирате от jQuery като XML:"jsonp text xml". По същия начин, съкратен низ като "jsonp xml" първо ще се опита да преобразува от jsonp в xml и, ако не успее, ще преобразува от jsonp в текст и след това от текст в xml.

тип (по подразбиране:'GET'):

Тип:низ

Описание:HTTP методът, който да се използва за заявката (напр. "POST", "GET", "PUT"). (добавена версия:1.9.0)

успех:

Тип:Функция (Всичко данни, String textStatus, jqXHR jqXHR )

Описание:Функция, която да бъде извикана, ако заявката бъде успешна. Функцията получава подадени три аргумента:Данните, върнати от сървъра, форматирани според параметъра dataType или функцията за обратно извикване на dataFilter, ако е посочена; низ, описващ състоянието; и обекта jqXHR (в jQuery 1.4.x, XMLHttpRequest). От jQuery 1.5 настройката за успех може да приеме набор от функции. Всяка функция ще се извиква последователно. Това е събитие на Ajax.

За повече информация относно конфигурацията използвайте връзката:http://api.jquery.com/jquery.ajax /

Пример:

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.

За третата и последна част:

Как да извика javascript функция от html и да предаде параметър между двете. Използвайте тази връзка:как да извика javascript функция от html и да предаде параметър през нея

Пълен работещ пример:

<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 от страна на сървъра (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>

Ако имате съмнения, просто помолете за моята помощ.

Добра работа! И не забравяйте да приемете отговора, ако ви помогне.