使用 JQuery 将 Javascript 本地存储变量发送到 MySql 数据库

Question

对于可能很容易做的事情，我不确定我是否正确实现了它，

我正在尝试发送 2 个使用 javascript 创建的本地存储变量，我知道这些数据是在客户端生成的并且需要在服务器端发送，并且在尝试了解 AJAX 之后，我找到了这个https://www.quora.com/Is-it-possible-to-get-localstorage-key-value-into-a-php-variable-If-so-how-can-we-do-it，它为我指明了正确的方向。

在查看了其他一些教程后，我认为我编写了正确的代码，但在尝试之后，脚本似乎无法正常运行。

单选按钮表单功能正常，可以毫无问题地将数据提交到 firebase firestore，但这对应用程序的其余部分不可行，因此我决定改用 mysql 数据库。

从控制台发生的问题是，当我单击执行表单操作时显示的提交按钮时

Uncaught ReferenceError: firebase is not defined
at HTMLFormElement.<anonymous> (auditConfirm.js:1)

但据我所知，我在使用的两个文件中都没有引用 auditConfirm.js。

我认为我的编码不正确，并且不知道从哪里开始，如果有人能告诉我哪里出错了，那就太好了。

这些是创建的本地存储变量，veneuPercentage 和 auditPercentage

// output results on page
// local storage has to go at the end as this is the final value of each item.

venueResult.querySelector('span').textContent = `${venuePercentage}%`;
venueResult.classList.remove('hide');
auditResult.querySelector('span').textContent = `${auditPercentage}%`;
auditResult.classList.remove('hide');

formConfirm.classList.remove('hide');

这是我编写的 PHP 文件 auditConfirm.php，然后应该从 javascript 访问这些变量并使用 JQuery post 方法将它们发送到数据库，该方法允许 sql 查询将它们添加到数据库中。

<?php

if(isset($_POST["confirmResult"])){

$venueScore = $_POST['jsVenuePercentage'];
$auditScore = $_POST['jsAuditPercentage'];

include('static/connection.php');

$auditQuery = "INSERT INTO bar 13 (venueScore, auditScore, submissionDate) VALUES ('$auditScore', '$auditScore', CURRANT_TIMESTAMP)";

if( !mysqli_query($connection, $auditQuery)){
    echo "Error: ". $auditQuery."<br>". mysqli_error($connection);
    
}
?>

<script>
var localVenuePercentage = localStorage.getItem("venuePercentage"); 
var localAuditPercentage = localStorage.getItem("auditPercentage");

$("confirmResult").click(function(){
    $.post("auditConfirm.php",{jsVenuePercentage: localVenuePercentage});
    $.post("auditConfirm.php",{jsAuditPercentage: localAuditPercentage});
});
</script>

但同样，我不确定我是否正确实现了它。

最后，这也是我为上述脚本分配的表单部分。

<div class="container blue-grey-text text-lighten-1">
<form class="submitResults-form hide brown lighten-5 p-b-10"> 
        <div class="row">
            <div class="col s3"></div>
            <div class="col s6 center-align">
                <a href="../php/auditConfirm.php"><button class="btn brand waves-effect waves-light red lighten-1" type="post" name="confirmResult" id="confirmResult">Confirm result<i class="material-icons right">send</i></button></a>
            </div>
            <div class="col s3"></div>
        </div>
</form>

Answer 1

在使用 Ajax 时，我建议尝试非速记：

   $.ajax({
      type: "POST",
      url: 'auditConfirm.php',
      data: {
                jsAuditPercentage: localAuditPercentage,
                jsVenuePercentage: localVenuePercentage, 
            }
    });

这个解决方案对我有用。