Cách lưu trữ giá trị javascript trong cơ sở dữ liệu

Ví dụ sau sẽ minh họa cách một trang web có thể lấy thông tin từ cơ sở dữ liệu bằng AJAX

Giải thích ví dụ - Hàm showCustomer()

Khi người dùng chọn một khách hàng trong danh sách thả xuống ở trên, một hàm có tên là showCustomer() được thực thi. Chức năng được kích hoạt bởi sự kiện onchange

hiệnKhách hàng

hàm showCustomer(str) {
nếu (str == "") {
tài liệu. getElementById("txtHint"). InternalHTML = "";
trở lại;
}
const xhttp = XMLHttpRequest mới();
xhttp. tải = chức năng () {
tài liệu. getElementById("txtHint"). bên trongHTML = cái này. văn bản phản hồi;
}
xhttp. open("NHẬN", "nhận khách hàng. php?q="+str);
xhttp. gửi();
}

Hàm showCustomer() thực hiện như sau

• Kiểm tra xem khách hàng có được chọn không
• Tạo một đối tượng XMLHttpRequest
• Tạo chức năng sẽ được thực thi khi phản hồi của máy chủ đã sẵn sàng
• Gửi yêu cầu đến một tệp trên máy chủ
• Lưu ý rằng một tham số (q) được thêm vào URL (với nội dung của danh sách thả xuống)

Trang máy chủ AJAX

Trang trên máy chủ được gọi bởi JavaScript ở trên là một tệp PHP có tên "getcustomer. php"

Mã nguồn trong "getcustomer. php" chạy truy vấn đối với cơ sở dữ liệu và trả về kết quả trong bảng HTML

Chúng tôi sẽ chỉ cho bạn cách lưu các biến JavaScript vào Cơ sở dữ liệu PHP/MySQL một cách dễ dàng và an toàn. Trong phần trình diễn của tôi, chúng tôi sẽ xem qua một ví dụ mà chúng tôi muốn lưu trữ một mảng cho người dùng của mình. Người dùng có thể được xác định bằng tên duy nhất của họ

Đăng nhập vào dịch vụ lưu trữ cPanel của bạn, tìm “Cơ sở dữ liệu MySQL” trong menu và tạo cơ sở dữ liệu mới. Tạo người dùng và thêm nó vào cơ sở dữ liệu, kiểm tra tất cả các đặc quyền. Chúng tôi sẽ sử dụng người dùng này để kết nối với DB

Mở phpMyAdmin và bạn sẽ thấy DB mới trong danh sách. Chọn nó và tạo một bảng mới. Trong ví dụ của tôi, tôi sẽ gọi nó là usertimes
Đặt khóa chính thành tự động tăng (A_I) và đảm bảo trường tên là một giá trị duy nhất. Chúng tôi sẽ lưu trữ ngày lưu hiện tại và các biến còn lại tùy thuộc vào thông số kỹ thuật của bạn. Lưu cài đặt khi hoàn tất. Cơ sở dữ liệu của tôi đã sẵn sàng để nhận đầu vào

Viết trong DataBase

Hàm JavaScript bên dưới thu thập các biến và đăng chúng vào cài đặt lưu. tập tin php
Div #saveWarningText sẽ hiển thị thông báo thành công được trả về từ tệp PHP hoặc thông báo lỗi nếu xảy ra sự cố
Ba biến chúng tôi đang chuyển là tên, số tiền và thời gian vì id được tăng tự động và ngày có thể được tạo ở phía máy chủ

function saveUserTimes() {
    $.post("savesettings.php",
    {
        name: $("#userName").val(),
        amount: aGlobalVariable,
        times: '1,2,3,4,5,6,7',
    },
    function(data,status){
        document.getElementById("saveWarningText").innerHTML = data;
        $( "#saveWarningText" ).fadeIn(100);
        setTimeout(function(){ $( "#saveWarningText" ).fadeOut(100); }, 3000);
    });
}

Tạo một tệp PHP để giải mã các tham số bài đăng và chèn chúng vào DB
Ở đầu tệp, chúng tôi chỉ định chuỗi kết nối cơ sở dữ liệu
Tiếp theo, chúng tôi nhận ba biến được truyền bằng phương thức post và thoát khỏi chuỗi để tránh SQL injection và đảm bảo bảo mật
Hãy nhớ rằng JavaScript được thực thi ở phía máy khách, vì vậy mọi người hãy kiểm tra và xem các tham số mà chúng tôi đang đăng lên tệp PHP của mình. Biết các biến bài đăng của chúng tôi, tin tặc có thể cố gắng thực hiện các truy vấn cơ sở dữ liệu thông qua tệp của chúng tôi. Đây là lý do tại sao bên cạnh thoát chuỗi, tôi cũng đang kiểm tra độ dài của chuỗi 'lần' và tôi không cho phép lưu trữ nếu dữ liệu quá lớn. Bạn có thể bao gồm các bước bảo mật bổ sung để tránh tin tặc. Chỉ cho phép một số lượng truy vấn hạn chế từ một địa chỉ IP có thể giảm nguy cơ ai đó sẽ làm ngập cơ sở dữ liệu của chúng tôi
Trong các dòng sau, chúng tôi tạo truy vấn $sql. Chúng tôi chèn vào bảng cơ sở dữ liệu usertimes các biến tên, ngày, số lượng và thời gian. Id được đặt tự động và ngày đang sử dụng truy vấn CURDATE(). Trong trường hợp giá trị tên hiện tại đã tồn tại trong cơ sở dữ liệu, 3 biến khác được cập nhật trong hàng đó. Đây là cách khóa trùng lặp được xử lý trong ví dụ của tôi

Nội dung của savesettings. tập tin php

$servername = "localhost";
$username = "databaseUserName";
$password = "userPassword";
$dbname = "databaseName";

$conn = new mysqli($servername, $username, $password, $dbname); // Create connection
if ($conn->connect_error) {     // Check connection
    die("Connection failed: " . $conn->connect_error);
} 

$name = mysqli_real_escape_string($conn, $_POST['name']);
$amount = mysqli_real_escape_string($conn, $_POST['amount']);
$times = mysqli_real_escape_string($conn, $_POST['times']);

if (strlen($times) > 200000) {  $times = "";    }

$sql = "INSERT INTO usertimes (name,date,amount,times)
VALUES ('$name', CURDATE(), '$amount', '$times') ON DUPLICATE KEY UPDATE    
date=CURDATE(), amount='$amount', times='$times'";

if ($conn->query($sql) === TRUE) {
    echo "Page saved!";
} else {
    echo "Error: " . $sql . "
" . $conn->error;
}
$conn->close();
?>

Tại thời điểm này, chúng tôi có thể ghi vào cơ sở dữ liệu, hãy xem cách đọc dữ liệu

Đọc từ DataBase

Cũng giống như phần viết, chúng ta cần một hàm JavaScript để gửi biến đến tệp PHP và xử lý dữ liệu được truy xuất

function openUserTimes(username) {
    $.post(
        "returndata.php",
        { name: username },
        function(response) {
            var myvariable = response.amount;
            var times = response.times;

            console.log('Retreived data: ', myvariable, times);
        }, 'json'
    );  
}

Dữ liệu duy nhất chúng tôi gửi trong ví dụ này là tên người dùng mà chúng tôi muốn lấy hai biến và ghi chúng vào bảng điều khiển

Làm cách nào để lưu trữ giá trị trong JavaScript?

Bạn có thể kết nối JavaScript với cơ sở dữ liệu không?

Làm cách nào để lưu trữ giá trị vĩnh viễn trong JavaScript?

Cách sử dụng dữ liệu JavaScript trong SQL?