同一页面上的 mysql 中的 Ajax 加载表不起作用
Ajax loading table from mysql on same page not working
>我正在尝试在同一页面上从mySQL加载表,而不是重定向到其他页面。 我让用户选择日期范围,然后按提交,它应该显示在指定的div id 标签中。 但是,它似乎不起作用。 我已经单独测试了查询 php 页面并且它可以工作。 感谢您的帮助。
.html
<script>
$(document).ready(function(){
//AJAX CALL
function fireAjax(){
var data1=document.getElementByID("from");
var data2=document.getElementByID("to");
if(data1 && data2){
$.ajax({
url:"chartRetrieve.php",
type:"POST",
data:{
range1:date1,
range2:date2,
},
success: function (response)
{
$('#chartDiv').html(response);
}
});
}
else{
$('#chartDiv').html("No Range Given");
}
}
});
</script>
<div id ="form">
<div id="date1">
<form id="form1" name="form1" method="post" action="">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
<input type="button" id="btnLoad" name="btnLoad" value="Submit" onclick="fireAjax();"/>
</form>
</div>
</div>
<div id="chartDiv">Test</div>
.php
<?php
include("dbconnect.php");
$link=Connection();
if(isset($_POST['range1']) && $_POST['range2'])
{
$data1 = $_POST['range1'];
$data2 = $_POST['range2'];
//$data1 = '2016-04-21 06:26:11';
//$data2 = '2016-04-24 06:30:11';
$result = mysql_query(
"
SELECT DISTINCT Date, Count
FROM testLocation
WHERE Date
BETWEEN '$data1%' AND '$data2%'
"
,$link
);
if($result!==FALSE){
echo '<table cellpadding="0" cellspacing="0" class="db-table">';
echo '<tr><th>Date</th><th>Count</th></tr>';
while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo '<tr>';
foreach($row as $key=>$value1){
echo '<td>', $value1,'</td>';
}
echo '<tr>';
}
echo '</table><br />';
mysql_free_result($result);
mysql_close();
}
}
else{
echo 'No Data';
}
?>
在 foreach() 更新 echo
后没有关闭 while
内部的<tr>
。 应该是echo '<'tr>'
代码中存在一些类型错误:
-
var data1=document.getElementByID("from"); var data2=document.getElementByID("to");
应该是
`var date1=document.getElementById("from");
var date2=document.getElementById("to");`
并将fireAjax()
功能移出$(document).ready(function(){})
希望它有效。此致敬意
相关文章:
- 无法在通过jQuery的ajax加载的页面中执行javascript
- 获取ajax加载的图像的大小
- 分页:如何用AJAX加载第一个页面
- 页面加载之前的jQuery Ajax加载程序
- ajax加载了内容,脚本没有执行
- 如何使用post和ajax加载视图Codeigniter
- $(select).selectmenu('打开')不'如果使用ajax加载页面,则不起作用
- ajax加载()后,包含图表的图像不会重新绘制
- 如果数据为空,Ajax加载不会停止
- 防止用户在jQuery Mobile中ajax加载页面时单击其他位置
- 将内容ajax加载到html弹出窗口中
- 导航栏和AJAX加载
- 用于各个元素的Ajax加载程序
- 通过AJAX加载页面并执行javascript和CSS
- 使用ajax加载页面的一部分
- 从表单中动态生成一个字符串,传递给通过AJAX加载的PHP文件
- 显示全屏Ajax加载程序的最佳方式
- 获取通过AJAX加载的元素
- 如何在rails应用程序中测试AJAX加载的内容
- 如何在Ajax加载新内容时停止JavaScript执行