将按钮单击时的数据从 javascript 发送到数据库

Question

所以我有一个从数据库获取数据并显示表格的 php 页面。每个 td 都象征着电影院的一个座位。我想要做的是当用户单击一个或多个 td 并单击发送时，数据库中每个 td 的状态列从 0（默认）更改为 1。下次访问数据库时，status=1的td的颜色不同。 到目前为止我的代码是：

    <div id="screen">SCREEN</div>
<div id="Seatings">
    <?php echo "<table border='1'>
        <tr>
        <th>Seating</th>
        </tr>";
        $count=0;
    echo "<tr>";
    echo"<td id='Seat_rn'>A</td>";
    while($row = mysql_fetch_array($sql))
    {

        if($count<10){
        echo "<td id='Seat_A' class='count'>" . $row['Seat'] . "</td>";  
        }
    $count++;
    }   
    echo "</tr>";
   $sql=mysql_query("SELECT * FROM Seating_para_20 Where Seat > '10'");
   echo "<tr>";
   echo"<td id='Seat_rn'>B</td>";
   while($row = mysql_fetch_array($sql))
   {
      if($count>=10){
       echo "<td id='Seat_B' class='count'>" . $row['Seat'] . "</td>";  
      }
   $count++;
   }
   echo"</tr>";
   echo "</table>";
   ?>
</div>
<input type="button" value="Done" name="done" onclick="window.close()"> 

我的 jquery 代码是：

        $("td #Seat_A").click(function(){
    $(this).css("background", "red");
        });
        $("td #Seat_B").click(function(){
    $(this).css("background", "red");
        });
        $(document."done").click(function(){
    alert(price:750 Baht);
        }) 

我离我想要的还很远，如果我的任何代码是“业余的”，我很抱歉，但我是新手，我一直在努力。我会很感激我能得到的任何帮助。

Answer 1

首先你要给你桌子上的每个TD添加一个ID，即Seat ID，例如：

echo "<td id='Seat_A' data-seat='". $row['id'] ."'class='count'>" . $row['Seat'] . "</td>";

然后使用 Ajax 将此 ID 发送到您的 PHP 脚本：

$("td #Seat_A").click(function(){
    var seat_number = $(this).data("seat");

    $.ajax({
        type: 'POST',
        url: "/take_a_seat.php",
        data: 'seat_number='+seat_number,
        success: function(data){
            $(this).css("background", "red");
        }
        dataType: "json"
    });
});

在 PHP 脚本中，您必须对具有此 ID 的座位执行您想要的操作并返回 true 或 false 作为结果。假设您的数据库表中有一个名为reserved 的字段。例如，您可以获取唯一 ID 并将该行更新为 reserved = 1。

Answer 2

试试这个简单易用的 ajax 脚本来完成你的任务

特点：您可以在将数据发送到beforeSend 部分中的数据库之前显示一个 gif img
从success 部分中的 php 文件获取响应
在 complete 部分中的 db 中插入数据后隐藏 img 和显示成功或不成功消息

var myVar = 'your desire data you want to send to db';
$.ajax({           
            type: "POST",  
            url:"scripts/dummy.php",  
            data:"myVar="+myVar,

            beforeSend: function()
            {                   

            },
            success: function(resp)
            {               

            }, 

            complete: function()
            {

            },

            error: function(e)
            {  
            alert('Error: ' + e);  
            }  

    }); //end Ajax

Answer 3

Javascript 是客户端。你的数据库是服务器端的。所以你必须使用 php 来更改你的数据库条目。

Answer 4

简而言之，如果你想在不重新加载页面的情况下执行 PHP 的东西，那就使用 AJAX。你可以使用它with your favorite JQuery。

Answer 5

这是一个概述。对于现有记录，您应该这样做

  <?php
  $count=1;
  $res = mysql_query("SELECT * FROM Seating_para_20 Where Seat > '10'");
  while($row = mysql_fetch_array($sql)) {

    if($row['status']==1) {
      $tdcolor = 'red';
    } else {
       $tdcolor = 'blue';

    }
    ?>

    <td id="td-<?php echo $count;?>" sytle="background-color:<?php echo $tdcolor; ?>" onclick="reserveseat(<?php echo $count; ?>);" >
    <?php
    $count++;
  }
  ?>

为了在页面加载后进行更改，您将执行 ajax 操作

 <script type="text/javascript" language="javascript">
 function reserveseat(count) {
   $.ajax({
    type: 'POST',
    url: "bookseat.php",
    data: '',
    success: function(data){
        $("#td-"+count).css("background-color", "red");
    }

   });
 }

 </script>

在bookseat.php 中，您将更改状态... :-) 从here 阅读有关ajax 的信息。 :-)