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

Question

老师要我做一个预约的系统
前端的图是这样的然后我想点击一个按钮然后可以对数据库写入预约
但是<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做的，也是边学边做，因为是菜鸟，求大神指教

Answer 1

要用ajax才能进行数据通信

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

楼主要求的是 用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>