ユーザーのデータを表示するビューテーブル内でのmysqlユーザーデータの変更と保存

ajax the basicの使用：

サーバー側とクライアント側のいくつかの基本的な概念;
いくつかの基本的なjavascript（jquery）の概念が必要です;
そして、いくつかのhtmlとjavascriptの基本。

最初の部分：

サーバー側のプログラミングとは、サーバーでサポートされている言語（Java、PHP、C＃など。サーバー側で実行されるコードをJavaScriptで記述できる）を使用して、サーバー上で実行されるコードを記述することです。クライアント側のプログラミングは、クライアント上で実行されるコードを記述しており、JavaScript、html、cssなどのブラウザで実行できる言語で実行されます。

2番目の場合：

jQueryコアを宣言することは重要です。

例：

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

最新バージョンのjQueryCoreを使用してください。

AJAXが機能する人の概念を持っています。

Ajaxは次の手順を実行します：

Webページでイベントが発生します（ページが読み込まれ、ボタンがクリックされます）
XMLHttpRequestオブジェクトはJavaScriptによって作成されます
XMLHttpRequestオブジェクトはリクエストをウェブサーバーに送信します
サーバーがリクエストを処理します
サーバーは応答をWebページに送り返します
応答はJavaScriptによって読み取られます
適切なアクション（ページの更新など）はJavaScriptによって実行されます

詳細については、次のリンクを使用してください： https://www.w3schools.com/xml/ajax_intro.asp

リクエストを設定します：

url：

タイプ：文字列

説明：リクエストの送信先のURLを含む文字列。

データ：

タイプ：PlainObjectまたはStringまたはArray

説明：サーバーに送信されるデータ。まだ文字列でない場合は、クエリ文字列に変換されます。 GETリクエストのURLに追加されます。この自動処理を防ぐには、processDataオプションを参照してください。オブジェクトはキーと値のペアである必要があります。値が配列の場合、jQueryは、従来の設定（以下で説明）の値に基づいて、同じキーで複数の値をシリアル化します。

dataType（デフォルト：Intelligent Guess（xml、json、script、またはhtml））：

タイプ：文字列

説明：サーバーから返されると予想されるデータのタイプ。何も指定されていない場合、jQueryは応答のMIMEタイプに基づいてそれを推測しようとします（XML MIMEタイプはXMLを生成し、1.4ではJSONはJavaScriptオブジェクトを生成し、1.4ではスクリプトはスクリプトを実行します。文字列として返されます）。使用可能なタイプ（および成功コールバックの最初の引数として渡される結果）は次のとおりです。

xml：jQueryを介して処理できるXMLドキュメントを返します。

html：HTMLをプレーンテキストとして返します。含まれているスクリプトタグは、DOMに挿入されたときに評価されます。

スクリプト：応答をJavaScriptとして評価し、プレーンテキストとして返します。キャッシュオプションがtrueに設定されていない限り、URLにクエリ文字列パラメータ_=[TIMESTAMP]を追加してキャッシュを無効にします。注：これにより、POSTがリモートドメインリクエストのGETに変わります。

json：応答をJSONとして評価し、JavaScriptオブジェクトを返します。クロスドメインの「json」リクエストは、リクエストにリクエストオプションにjsonp：falseが含まれていない限り、「jsonp」に変換されます。 JSONデータは厳密な方法で解析されます。不正な形式のJSONはすべて拒否され、解析エラーがスローされます。 jQuery 1.9以降、空の応答も拒否されます。サーバーは、代わりにnullまたは{}の応答を返す必要があります。（適切なJSONフォーマットの詳細については、json.orgを参照してください。）jsonp：JSONPを使用してJSONブロックをロードします。余分な「？callback =？」を追加しますURLの最後にコールバックを指定します。キャッシュオプションがtrueに設定されていない限り、URLにクエリ文字列パラメータ「_ =[TIMESTAMP]」を追加してキャッシュを無効にします。text：プレーンテキスト文字列。複数のスペースで区切られた値：jQuery 1.5以降、jQueryは次のことができます。 dataTypeをContent-Typeヘッダーで受け取ったものから必要なものに変換します。たとえば、テキスト応答をXMLとして処理する場合は、dataTypeに「textxml」を使用します。 JSONPリクエストを作成し、テキストとして受信して、jQueryによってXMLとして解釈することもできます："jsonptextxml"。同様に、「jsonp xml」などの短縮文字列は、最初にjsonpからxmlへの変換を試み、それが失敗した場合は、jsonpからテキストへの変換を試み、次にテキストからxmlへの変換を試みます。

タイプ（デフォルト：'GET'）：

タイプ：文字列

説明：リクエストに使用するHTTPメソッド（「POST」、「GET」、「PUT」など）。（追加されたバージョン：1.9.0）

成功：

タイプ：Function（Anything data、String textStatus、jqXHR jqXHR）

説明：リクエストが成功した場合に呼び出される関数。この関数には、次の3つの引数が渡されます。サーバーから返されるデータ。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.

3番目と最後の部分：

htmlからjavascript関数を呼び出し、2つの間でパラメーターを渡す方法。次のリンクを使用してください：htmlからjavascript関数を呼び出してパラメータを渡す方法

完全に機能する例：

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

疑問がある場合は、助けを求めてください。

よくできました！そして、それが助けになるなら、答えを受け入れることを忘れないでください。