Rumah > Artikel > pembangunan bahagian belakang > php 选择时间 不跳转刷新数据
各位大神,我简单描述下我的问题
我在当前页面想做两个日期选择器。然后当选择完了日期之后,页面能不跳转刷新表格中的数据。
我知道可以用ajax做。但是我第一次接触php web 所以不太清楚,所以各位在解答的时候尽量详细点。
我先上一下我的页面。
这是还没有加日期选择器的效果图。
我的代码里是这么写的。(因为我代码里现在的时间是写死了。所以肯定要通过选择好的日期,传递值到我这条sql语句里)不知道该如何做。
$top $end 分别是选择器选好的时间。 $data是我的表
$djvhj=mysql_query("select sum(单机率) FROM $data where 日期 between '$top' and '$end'",$connone);
那你的日期选择器做出来了吗,不一定要ajax,弄成表单提交也可以。
1.日期选择,你可以百度搜索,插件一大堆。
2.ajax实现,说下思路吧,给那个搜索的按钮加个id,然后给id加一个click事件,当这个事件触发的时候,就发送ajax请求。返回的数据你可以选择直接在你ajax请求的那个连接里面直接echo出来,或者在另外一个页面处理好,然后再load回来。
那你的日期选择器做出来了吗,不一定要ajax,弄成表单提交也可以。
没有哦。想要个现成的。 问题是这个表单要落实到那? 能给出点具体方案吗
<script></script>
选择开始日期
选择结束日期
$starts=
$ends
我用了下my97这个日期插件。找了些资料。当选中两个日期 也就是onClick的时候 会用 onClick="WdatePicker({el:$dp.$('s')})"> 来传值。 但是我想问一下。这个值我该怎么赋给我的两个变量。 如果赋值成功了。会即时刷新页面数据吗
那你的日期选择器做出来了吗,不一定要ajax,弄成表单提交也可以。
没有哦。想要个现成的。 问题是这个表单要落实到那? 能给出点具体方案吗
你是想直接选中时间就发送ajax请求,然后不需要查询按钮?
那你的日期选择器做出来了吗,不一定要ajax,弄成表单提交也可以。
没有哦。想要个现成的。 问题是这个表单要落实到那? 能给出点具体方案吗
你是想直接选中时间就发送ajax请求,然后不需要查询按钮?
是的
function choose_time(){ WdatePicker({ el:'send_datetime', minDate:'<?php echo date("Y-m-d H:i:s");?>', maxDate:'<?php echo date("Y-m-d H:i:s",strtotime("+3 years"));?>', dateFmt:'yyyy-MM-dd HH:mm:ss', readOnly:false, onpicked:function(dp){ $("#show_time").html("您的邮件将于<span>"+dp.cal.getDateStr()+"</span>发送到对方邮箱"); $("#send_time").val(dp.cal.getDateStr()); } });}
还是利用表单提交吧,ajax获取数据,你这个页面写的会蛋疼的。
还是利用表单提交吧,ajax获取数据,你这个页面写的会蛋疼的。
用表单如何提交? 帮忙给个例子出来把
ajax 无需表单:
在表格页上,选择时间后发送异步请求,传参(选择的时间)给处理页面,处理页面接收到参数后进行数据库操作并生成数据 将数据返回给请求,请求接到数据后把新数据插入到表格中。
这是我的html页面 和 php页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"></script><title>店面营业查询结果</title><style type="text/css"></style></head><body><span class="style2"><form action="right1bak.php" method="post"><font color=red>选择开始日期</font><input name="top" value="" class="Wdate" type="text" onClick="WdatePicker()"><font color=red>选择结束日期</font><input name="end" value="" class="Wdate" type="text" onClick="WdatePicker()"><input type="submit" name="submit" value="确定时间"></form></span></body></html>
<?phpheader("Content-type: text/html; charset=utf-8");$top=$_GET["top"];$end=$_GET["end"];echo "\r<a href='javascript:onclick=history.go(-1)'>返回上页</a> ";$connone = mysql_connect("192.168.3.221","root","myoa888");mysql_select_db("klserver",$connone);$yhspsr=mysql_query("SELECT sum(商品收入) FROM yybb_yh WHERE 日期 between '$top' and '$end'",$connone); //查询永浩商品收入语句
ajax 无需表单:
在表格页上,选择时间后发送异步请求,传参(选择的时间)给处理页面,处理页面接收到参数后进行数据库操作并生成数据 将数据返回给请求,请求接到数据后把新数据插入到表格中。
以上两个value先给个默认时间
将WdatePicker()函数重新改写如下:
function choose_time(){ WdatePicker({ dateFmt:'yyyy-MM-dd HH:mm:ss', readOnly:false,//这个是控制职能通过插件选择时间,不能手动填写,不要可以去掉 onpicked:function(dp){ //dp.cal.getDateStr()这个值就是你锁选择的时间 var top = dp.cal.getDateStr(); var end = $("#end").val(); $.post('处理请求链接',{'top':top,'end':end},function(msg){//将所取到的时间发送到php处理页面 //这里处理返回数据 }) } });}
ajax 无需表单:
在表格页上,选择时间后发送异步请求,传参(选择的时间)给处理页面,处理页面接收到参数后进行数据库操作并生成数据 将数据返回给请求,请求接到数据后把新数据插入到表格中。
以上两个value先给个默认时间
将WdatePicker()函数重新改写如下:
function choose_time(){ WdatePicker({ dateFmt:'yyyy-MM-dd HH:mm:ss', readOnly:false,//这个是控制职能通过插件选择时间,不能手动填写,不要可以去掉 onpicked:function(dp){ //dp.cal.getDateStr()这个值就是你锁选择的时间 var top = dp.cal.getDateStr(); var end = $("#end").val(); $.post('处理请求链接',{'top':top,'end':end},function(msg){//将所取到的时间发送到php处理页面 //这里处理返回数据 }) } });}
SELECT sum(会员收入) FROM yybb_xdf WHERE 日期 between '2013-07-03' and '2013-07-04'
SELECT sum(会员收入) FROM yybb_xdf WHERE 日期 between '$top' and '$end'
可能找到问题所在了。
我的代码现在是这样
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"></script><script language="javascript" type="text/javascript">function choose_time(){ WdatePicker({ dateFmt:'yyyy-MM-dd', readOnly:false,//这个是控制职能通过插件选择时间,不能手动填写,不要可以去掉 onpicked:function(dp){ //dp.cal.getDateStr()这个值就是你锁选择的时间 var top = dp.cal.getDateStr(); var end = $("#end").val(); $.post('处理请求链接',{'top':top,'end':end},function(msg){//将所取到的时间发送到php处理页面 //这里处理返回数据 }) } });}</script><title>店面营业查询结果</title></head><body><span class="style2"><form action="right1bak.php"><font color=red>选择开始日期</font><input name="top" id="top" value="" class="Wdate" type="text" onClick="choose_time()"><font color=red>选择结束日期</font><input name="end" id="end" value="" class="Wdate" type="text" onClick="choose_time()"><input type="submit" name="submit" value="确定时间"></form></span></body></html>
SELECT sum(会员收入) FROM yybb_xdf WHERE 日期 between '$top' and '$end'
这个sql语句是错误的。。。
单引号里面变量不能这样放,你先把sql语句写对吧。
先确定是用ajax提交还是用form提交吧,看你的代码中两个都有。