javascript - 根据用户输入显示数据
问题描述
我有一个包含 2 列(侧面和中间)的页面
在侧栏中,我有一个带有日期和按钮的表单(查看摘要报告)。
当用户选择日期并单击按钮时,它必须从 MySQL DB 中获取数据并在中间列显示结果。
当我对 get_summary_sheet 执行调用操作时,它会在新页面上显示信息。这证实它工作正常。但是,我不想在新页面上显示它。一旦用户单击按钮,我想将其显示在中间列中。
我正在研究和探索使用 onclick 功能的选项。
这是我的侧栏:
<div class="column side">
Select Date:
<br>
<input type="date" id="select_summarydate" name="select_summarydate" required><br>
<button onclick="myFunction()">Display Report</button>
</div>
以下是 PHP 文件中的代码示例:
$yourDate = $_GET['select_summarydate'];
$sqlpole="select count(*) as totalpole from user where MeterType = 'Pole Mounted' AND Category = 'Inspection' AND Date = '".$yourDate."%'";
$resultpole=mysqli_query($con,$sqlpole);
$datapole=mysqli_fetch_assoc($resultpole);
我需要将结果调用到中间列并显示在表格中:
<div class="column middle">
* display results of function in php file
</div>
下面是一段 JS 代码:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script language="javascript">
function myFunction() {
// function below will run get_summary_sheet and should display in middle column
$.ajax({
type: "GET",
url: "get_summary_sheet.php" ,
???????,
???????
});
</script>
Javascript 函数中必须包含哪些代码?
解决方案
function myFunction() {
var select_summarydate = $('#select_summarydate').val()
$.ajax({
type: "GET",
url: "get_summary_sheet.php" ,
data: {
select_summarydate : select_summarydate
},
success: function(resp){
$('.middle').html(resp)
}
});
}
这是一个完整的 ajax 函数,可以发送数据并在 html 中显示获取的数据
您的 php 代码如下所示
$yourDate = $_GET['select_summarydate'];
$sqlpole="select count(*) as totalpole from user where MeterType = 'Pole Mounted' AND Category = 'Inspection' AND Date = '".$yourDate."%'";
$resultpole=mysqli_query($con,$sqlpole);
while ($single = $resultpole->fetch_assoc()) {
echo $single['firstcolumn'].' '.$single['secondcolumn']
.'<br>';
}
推荐阅读
- angular - 观察者 http 实现是错误的?
- python - 三角形/几何彩虹螺旋
- openvpn - 双隧道 OpenVPN
- c++ - 如何将 opendnp3 添加为静态 C++ 库
- c++ - 如何在分离头文件和实现文件的同时使用模板?
- ios - 如何偏移 UILabel 文本对齐?
- typescript - 打字稿:如何解释扩展和函数类型之间的这种交互
- angular - 使用 angular6 和 @ng-toolkit/universal 时 og 标签出现问题
- c# - 如何通过 Parallel.ForEach 使用计算机中的所有内核
- npm - 在 monorepo 中强制执行共享依赖项