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

Question

我有一个表格，其中列出了用户输入的值，侧面有 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 进行检查时，这似乎可以工作一次，但现在按钮什么也没做。

我今天早上又试了一次，按钮按下并且第一次发送这篇文章，然后按钮不再这样做 - 即使在页面重新加载时也是如此。

Answer 1

我能够让它与以下内容一起工作：

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 执行相同功能的多个按钮。

Answer 2

因为您使用“POST”发送 ajax 调用，所以在我看来 if(isSet($_GET['complete'])) 将评估为假。此外，如果您的按钮是使用 php 动态生成的，则将您的点击处理程序更改为以下内容：

$('document').on('click', '#markComplete', function (){
     // Your code here
 })

Answer 3

如果您有多个“标记完成”按钮；您需要使用类而不是 ID 来绑定事件。

<button id="test">
  Test 1
</button>
<button id="test">
  Test 2
</button>
<script>
$('#test').click(function (e) {
  console.log('test', e.target);
});
</script>

在本例中，只有第一个按钮有效。当你指定一个 ID 时，jQuery 只会返回第一个元素。

如果你使用类来绑定事件；两个按钮都可以工作：

<button class="test">
  Test 1
</button>
<button class="test">
  Test 2
</button>
<script>
$('.test').click(function (e) {
  console.log('test', e.target);
});
</script>

Answer 4

我认为您的 javascript 在这一行有错误...

var input = input = $(this).text()

尝试用这个替换..

var input = $(this).text();