关于一个预约系统怎么用jq实现

2015-03-03 11:29:33 463 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

SpringBoot+Vue自习室预约系统设计与实现自习室预约系统是教育信息化中的典型应用，通过前后端分离架构（SpringBoot+Vue）解决传统人工管理的效率问题。系统采用状态机模式管理座位生命周期，结合Redis处理高并发预约，利用WebSocket实现实时状态推送。数据库设计包含座位表和预约表，支持可视化选座和违约检测。技术实现上涉及分布式锁防重复预约、定时任务归档历史数据等方案，适用于高校图书馆等需要高效管理公共资源的场景。阅读详情

老师要我做一个预约的系统
前端的图是这样的

然后我想点击一个按钮然后可以对数据库写入预约
但是<input type="button" value="预约">这个button怎么通过jq传值到表单处理然后写入数据库呢？
源代码如下：

 <form action="#" method="post">

      <table cellpadding="3" cellspacing="1" border="1" width="50%" class="tableBorder" align=center>

         <tr>

            <td>星期</td>

            <td>上午</td>

            <td>下午</td>

         </tr>

         <tr>

            <td>一</td>

            <td><input type="button" value="预约" /></td>

            <td><input type="button" value="预约" /></td>

         </tr>

         <tr>

            <td>二</td>

            <td><input type="button" value="预约" /></td>

            <td><input type="button" value="预约" /></td>

         </tr>

         <tr>

            <td>三</td>

            <td><input type="button" value="预约" /></td>

            <td><input type="button" value="已满" /></td>

         </tr>

         <tr>

            <td>四</td>

            <td><input type="button" value="已满" /></td>

            <td><input type="button" value="已满" /></td>

         </tr>

         <tr>

            <td>五</td>

            <td><input type="button" value="已满" /></td>

            <td><input type="button" value="已满" /></td>

         </tr>

         <tr>

            <td>六</td>

            <td><input type="button" value="已满" /></td>

            <td><input type="button" value="已满" /></td>

         </tr>

         <tr>

            <td>日</td>

            <td><input type="button" value="预约" /></td>

            <td><input type="button" value="预约" /></td>

         </tr>

      </table> 

      </form>

还有就是我用的thinkphp做的，也是边学边做，因为是菜鸟，求大神指教

...全文

【Linux 驱动开发】STM32MP1 LCD 显示系统完整实践指南 STM32MP1 LCD显示系统实践指南本文全面介绍STM32MP1平台实现MIPI DSI LCD显示的完整流程，涵盖硬件连接、设备树配置、显示原理和驱动实现。主要内容包括：硬件连接：详细说明MIPI DSI差分对、背光PWM、复位/供电管脚的连接方式设备树配置： PWM背光控制节点设置 LTDC与DSI端口映射关系 Panel节点参数定义显示基础：讲解LCD/OLED显示原理、常见接口类型（RGB/LVDS/MIPI/HDMI）及信号时序驱动实现。阅读详情

LHN_hpu

基础编程 21,889 成员 140,329 内容

+ 关注 + 加入社区

切换为时间正序

mengfk000 2015-03-03

打赏
举报

预约用按钮，已满就别再用按钮了。点击预约就用ajax把日期提交到后台

智商众筹 2015-03-03

打赏
举报

<input type="button" value="预约" /> 比如这是星期一上午的按钮，那么给他加2个属性 a="1" b="上午" 再给按钮绑定click事件，运行一个自定义函数 onclick="fn(this)" 函数fn里用$(this).attr('a')获取到星期几和上下午，将这些参数打包成一个对象然后用$.post发送到php 具体用法有不明白的百度吧

断点Bingo 2015-03-03

打赏
举报

要用ajax才能进行数据通信

xuzuning 2015-03-03

打赏
举报

楼主要求的是用jq实现，所以就给个 jq 的测试例，至于 php 收到数据后如何操作，已不在讨论的范围了

<?php
if($_POST) {
  print_r($_POST);
  exit;
}
?>
<script src=scripts/jquery-1.8.3.min.js></script>
<script>
$(function() {
  $(':button').click(function() {
    var data = {};
    var that = $(this).parents('td')[0];
    $(this).parents('tr').find('td').each(function(i, tag) {
      if(i == 0) data['week'] = $(this).text();
      if(that == this) data['time'] = i == 1 ? 'pm' : 'am';
    });
    var url = location.href;
    var url = $(this).parents('form').attr('action'); //需将 action="#" 改为 action="?" 或实际的 url
    $.post(url, data, function(d) {
      alert(d);
    });
  });
})
</script>
 <form action="?" method="post">
      <table cellpadding="3" cellspacing="1" border="1" width="50%" class="tableBorder" align=center>
         <tr>
            <td>星期</td>
            <td>上午</td>
            <td>下午</td>
         </tr>
         <tr>
            <td>一</td>
            <td><input type="button" value="预约" /></td>
            <td><input type="button" value="预约" /></td>
         </tr>
         <tr>
            <td>二</td>
            <td><input type="button" value="预约" /></td>
            <td><input type="button" value="预约" /></td>
         </tr>
         <tr>
            <td>三</td>
            <td><input type="button" value="预约" /></td>
            <td><input type="button" value="已满" /></td>
         </tr>
         <tr>
            <td>四</td>
            <td><input type="button" value="已满" /></td>
            <td><input type="button" value="已满" /></td>
         </tr>
         <tr>
            <td>五</td>
            <td><input type="button" value="已满" /></td>
            <td><input type="button" value="已满" /></td>
         </tr>
         <tr>
            <td>六</td>
            <td><input type="button" value="已满" /></td>
            <td><input type="button" value="已满" /></td>
         </tr>
         <tr>
            <td>日</td>
            <td><input type="button" value="预约" /></td>
            <td><input type="button" value="预约" /></td>
         </tr>
      </table> 
      </form>

LB228988 2015-03-03

打赏
举报

ajax代码实现：
$(document).ready(function(){
       $..ajax({
            url:"你的服务端处理地址，假设b.php",
             data:"你的数据",
            async:false,//是否同步
            datatype:"返回数据类型（xml，json，text）",
           success:function(msg){
           //你的前端逻辑
         },
          error:function(msg){
              //你的前端逻辑
         }
   });
});


b.php
获取数据，插入数据库...............................

关于一个预约系统怎么用jq实现

相关推荐