使用JQuery将JavaScript localStorage变量上传至MySQL的问题排查
这件事按理说实现难度不高,但我不确定我的实现方式是否正确。
我需要将两个通过JavaScript生成的localStorage变量发送到服务端,研究AJAX实现方案时参考了相关内容,跟着多个教程编写完代码后,实际运行并未生效。
原本的单选按钮表单可以正常提交数据到Firebase Firestore,但该方案不符合应用后续需求,因此我改用MySQL数据库存储数据。
触发表单操作后点击提交按钮时,控制台抛出如下报错:
Uncaught ReferenceError: firebase is not defined at HTMLFormElement.<anonymous> (auditConfirm.js:1)
但我确认我用到的两个文件中都没有引用auditConfirm.js。
目前我找不到代码的问题所在,希望大家能帮忙指出问题。
我创建的localStorage变量为venuePercentage和auditPercentage,相关代码如下:
// 在页面输出结果 // localStorage逻辑要放在最后,因为这是每个项的最终值 venueResult.querySelector('span').textContent = `${venuePercentage}%`; venueResult.classList.remove('hide'); auditorResult.querySelector('span').textContent = `${auditPercentage}%`; auditorResult.classList.remove('hide'); formConfirm.classList.remove('hide');
我编写的PHP文件为auditConfirm.php,预期逻辑是通过JQuery的post方法获取JavaScript中的变量,再执行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>
内容的提问来源于stack exchange,提问作者Matthew
相关产品推荐
相关产品推荐

