javascript – aJax使用按钮更新sqlite和php中的特定行

我有一个表格,列出了用户输入的值,侧面有2个按钮可以删除或标记完成.在页面上该表是可见的,有3个选项卡,我们将调用这些Tab1,Tab2和Tab3

每个选项卡都有一个表(如上所述),其中包含有关特定类型条目的信息.

这些按钮很简单< a href>链接,所以点击后他们重新加载页面.这是一个问题,因为用户视图被刷新并且它将标签返回到默认选项卡,并且在尝试标记多个条目时也是不方便的.

我想让这些按钮将Ajax请求发送到另一个页面来处理数据.唯一的问题是,我不确定如何进行ajax调用.

这就是我现在所拥有的

我的按钮

            echo "<td class='td-actions'>";
                echo "  <a href='?complete=".$row['uniqueID']."' class='btn btn-success btn-small'>
                            <i class='btn-fa fa-only fa fa-check'> </i>
                        </a> 
                        <a href='?remove=".$row['uniqueID']."' class='btn btn-danger btn-small'>
                            <i class='btn-fa fa-only fa fa-remove'> </i>
                        </a>";
            echo "</td>";

有一个名为Complete,一个名为Remove.

当按下其中任何一个时,它会重新加载触发一些php if语句的页面.

       if(isSet($_GET['remove'])) {
            $sql = "DELETE from rl_logged where uniqueID='".$_GET['remove']."';";
            $ret = $db->exec($sql);
            echo "<meta http-equiv='refresh' content='0;index.php' />";
        }

        if(isSet($_GET['complete'])) {
            $sql = "UPDATE rl_logged set complete=1 where uniqueID='".$_GET['complete']."';";
            $ret = $db->exec($sql);
            echo "<meta http-equiv='refresh' content='0;index.php' />";
        }

这些是相对简单的功能.我的问题是我不太了解javascript.

任何帮助将非常感激.

我想出的javascript就是这个

                    $(document).ready(function() {
                        $('#markComplete').click(function() {
                            var input = input = $(this).text()
                            $.ajax({ // create an AJAX call...
                                data: {
                                    onionID: input,
                                },
                                type: 'POST', // GET or POST from the form
                                url: 'pages/ajax/markCompleteRL.php', // the file to call from the form
                                success: function(response) { // on success..
                                   refreshAllTabsWithFade();
                               }
                           });
                        });
                    });

使用此按钮

                            <div name='markComplete' id='markComplete' class='btn btn-success btn-small'>
                                <i class='btn-fa fa-only fa fa-check'></i>".$row['uniqueID']."
                            </div> 

但是,在用firebug进行检查时,这似乎可以起作用,但现在按钮没有做任何事情.

我今天早上再次尝试,按下按钮并且第一次发送此帖子,然后按钮不会再次执行 – 即使在页面重新加载时也是如此.

解决方法:

我能够使用以下内容：

JavaScript的：

$('.markComplete').submit( function( event ) {
            event.preventDefault();
            event.stopImmediatePropagation();
            $.ajax({ // create an AJAX call...
                data: $(this).serialize(), // serialize the form
                type: "POST", // GET or POST from the form
                url: "pages/ajax/repairlogMarks.php", // the file to call from the form
                success: function(response) { // on success..
                    refreshAllTabs();
                }
            });
            return false;
        });

按钮：

                                 <form class="markComplete">

                                        <input type="text" style="display:none;" class="form-control" name="uniqueid" value='<?=$row['uniqueID'];?>'>
                                        <input type="text" style="display:none;" class="form-control" name="markcomp" value='1'>
                                        <button type="submit" class="btn btn-success">
                                            <i class="btn-fa fa-only fa fa-check"></i>
                                        </button>

                                </form>

基本上,我把按钮变成了一个我知道如何创建ajax请求的表单.

–
更新以使其适用于为不同的唯一ID执行相同功能的多个按钮.