Thay đổi và lưu dữ liệu người dùng mysql trong một Bảng xem hiển thị dữ liệu của người dùng

Sử dụng ajax cơ bản:

Một số khái niệm cơ bản về phía máy chủ và phía máy khách;
Ned một số khái niệm javascript (jquery) cơ bản;
Và một số kiến thức cơ bản về html và javascript.

Đối với phần đầu tiên:

Lập trình phía máy chủ là viết mã chạy trên máy chủ, sử dụng các ngôn ngữ được máy chủ hỗ trợ (chẳng hạn như Java, PHP, C #; có thể viết mã thực thi trên phía máy chủ bằng JavaScript). Lập trình phía máy khách là viết mã sẽ chạy trên máy khách và được thực hiện bằng các ngôn ngữ mà trình duyệt có thể thực thi, chẳng hạn như JavaScript, html và css.

Đối với thứ hai:

Ajax cần thiết để khai báo jQuery Core.

Ví dụ:

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

Sử dụng phiên bản mới nhất jQuery Core.

Có khái niệm về ai AJAX hoạt động.

Ajax hoạt động theo các bước sau:

Một sự kiện xảy ra trong một trang web (trang được tải, một nút được nhấp)
Một đối tượng XMLHttpRequest được tạo bởi JavaScript
Đối tượng XMLHttpRequest gửi yêu cầu đến máy chủ web
Máy chủ xử lý yêu cầu
Máy chủ gửi phản hồi trở lại trang web
Phản hồi được đọc bằng JavaScript
Hành động thích hợp (như cập nhật trang) được thực hiện bởi JavaScript

Để biết thêm Sử dụng liên kết này: https://www.w3schools.com/xml/ajax_intro.asp

Định cấu hình Yêu cầu:

url:

Loại:Chuỗi

Mô tả:Một chuỗi chứa URL mà yêu cầu được gửi đến.

dữ liệu:

Loại:PlainObject hoặc String hoặc Array

Mô tả:Dữ liệu được gửi đến máy chủ. Nó được chuyển đổi thành một chuỗi truy vấn, nếu chưa phải là một chuỗi. Nó được thêm vào url cho các yêu cầu GET. Xem tùy chọn processData để ngăn quá trình xử lý tự động này. Đối tượng phải là cặp Khóa / Giá trị. Nếu giá trị là một Mảng, jQuery sẽ tuần tự hóa nhiều giá trị với cùng một khóa dựa trên giá trị của cài đặt truyền thống (được mô tả bên dưới).

dataType (mặc định:Intelligent Guess (xml, json, script hoặc html)):

Loại:Chuỗi

Mô tả:Loại dữ liệu bạn đang mong đợi từ máy chủ. Nếu không có gì được chỉ định, jQuery sẽ cố gắng suy ra nó dựa trên kiểu MIME của phản hồi (kiểu MIME XML sẽ mang lại XML, trong 1.4 JSON sẽ mang lại một đối tượng JavaScript, trong 1.4 script sẽ thực thi script và bất kỳ thứ gì khác sẽ trả về dưới dạng một chuỗi). Các loại có sẵn (và kết quả được chuyển làm đối số đầu tiên cho lệnh gọi lại thành công của bạn) là:

xml:Trả về một tài liệu XML có thể được xử lý qua jQuery.

html:Trả về HTML dưới dạng văn bản thuần túy; các thẻ script bao gồm được đánh giá khi được chèn vào DOM.

script:Đánh giá phản hồi dưới dạng JavaScript và trả về dưới dạng văn bản thuần túy. Tắt bộ nhớ đệm bằng cách thêm tham số chuỗi truy vấn, _ =[TIMESTAMP], vào URL trừ khi tùy chọn bộ đệm được đặt thành true. Lưu ý:Điều này sẽ biến POST thành GET cho các yêu cầu miền từ xa.

json:Đánh giá phản hồi dưới dạng JSON và trả về một đối tượng JavaScript. Các yêu cầu "json" tên miền chéo được chuyển đổi thành "jsonp" trừ khi yêu cầu bao gồmjsonp:false trong các tùy chọn yêu cầu của nó. Dữ liệu JSON được phân tích cú pháp một cách nghiêm ngặt; mọi JSON không đúng định dạng đều bị từ chối và lỗi phân tích cú pháp được đưa ra. Kể từ jQuery 1.9, một phản hồi trống cũng bị từ chối; thay vào đó máy chủ sẽ trả về phản hồi là null hoặc {}. (Xem json.org để biết thêm thông tin về định dạng JSON thích hợp.) Jsonp:Tải trong một khối JSON bằng JSONP. Thêm một dấu "? Callback =?" vào cuối URL của bạn để chỉ định lệnh gọi lại. Tắt bộ nhớ đệm bằng cách thêm tham số chuỗi truy vấn, "_ =[TIMESTAMP]", vào URL trừ khi tùy chọn bộ đệm được đặt thành true.text:Một chuỗi văn bản thuần túy. Nhiều giá trị được phân tách bằng dấu cách:Kể từ jQuery 1.5, jQuery có thể chuyển đổi một DataType từ những gì nó nhận được trong tiêu đề Content-Type thành những gì bạn yêu cầu. Ví dụ:nếu bạn muốn một phản hồi văn bản được coi là XML, hãy sử dụng "text xml" cho dataType. Bạn cũng có thể tạo một yêu cầu JSONP, nhận nó dưới dạng văn bản và được jQuery giải thích dưới dạng XML:"jsonp text xml". Tương tự, một chuỗi viết tắt, chẳng hạn như "jsonp xml" trước tiên sẽ cố gắng chuyển đổi từ jsonp sang xml và nếu không thực hiện được, chuyển đổi từ jsonp thành văn bản rồi từ văn bản sang xml.

loại (mặc định:'GET'):

Loại:Chuỗi

Mô tả:Phương thức HTTP để sử dụng cho yêu cầu (ví dụ:"POST", "GET", "PUT"). (phiên bản thêm:1.9.0)

thành công:

Loại:Hàm (Bất kỳ dữ liệu nào, Chuỗi văn bản, jqXHR jqXHR)

Mô tả:Một hàm sẽ được gọi nếu yêu cầu thành công. Hàm được truyền ba đối số:Dữ liệu trả về từ máy chủ, được định dạng theo tham số dataType hoặc hàm gọi lại dataFilter, nếu được chỉ định; một chuỗi mô tả trạng thái; và đối tượng jqXHR (trong jQuery 1.4.x, XMLHttpRequest). Kể từ jQuery 1.5, cài đặt thành công có thể chấp nhận một loạt các hàm. Lần lượt từng hàm sẽ được gọi. Đây là một sự kiện Ajax.

Để biết thêm thông tin về cấu hình, hãy sử dụng liên kết: http://api.jquery.com/jquery.ajax /

Ví dụ:

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.

Đối với phần thứ ba và phần cuối cùng:

Cách gọi hàm javascript từ html và truyền tham số giữa hai hàm. Sử dụng liên kết này: cách gọi hàm javascript từ html và truyền tham số qua nó

Một ví dụ hoạt động đầy đủ:

<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 phía máy chủ (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>

Bất kỳ nghi ngờ, chỉ cần yêu cầu sự giúp đỡ của tôi.

Làm tốt lắm! Và đừng quên chấp nhận câu trả lời nếu nó hữu ích.