使用没有表单的复选框使用 AJAX 和 PHP 更新数据库

Question

我有一个表格，其中最后一个单元格是一个位值。插入新数据时，该位自动设置为 1。我使用 PHP 以<table> 形式显示表格的内容，其中最后一个单元格包含一个复选框。我没有在<form></form> 标签中包围这些复选框，它们只是<input ... /> 和name="stat[]." 我使用了一个数组作为名称，以便PHP 知道$_POST['stat'] 将是一个包含所有输入的数组。

可以选中并提交一个或多个复选框以将位值更新为0。

问题：

我必须为此使用<form> 标签吗？ AJAX 不工作。

可以为<button> 元素分配方法和操作吗？

HTML 按钮。注意这里没有表格。

<input type="submit" id="updateList" type="button" method="post" action="classes/requests/updateList.php" value="update list" />

jQuery 和 AJAX

$('input#updateList').on('click', function (e) {
    e.preventDefault();
    var open = 'yes';
    if ($('.update:checked').length <= 0) {
        $('.fade_bg').fadeIn(200);
        $('#updateStat').slideDown(600);
        $('span#stat2').fadeIn(400).text('You must make a selection');
        $('a#closeBox2').show();
        return false;
    }
    else {
        $('.update').each(function (index) {
            var chckd = $('#chck' + index).val();
            open = 'no';
            $.ajax ({
                type: 'post',
                url: 'classes/requests/updateList.php',
                data: {
                    stat: chckd
                },
                success: function(data) {
                    if (data === 'updated') {
                        alert(data);
               //       $('.fade_bg').fadeIn(200);
                        // $('#reqStat').slideDown(600);
                        // $('span#stat').fadeIn(400).text('Thank you. Your request has been submitted.');
                        // $('a#successClose').show();
                    }
                    else {
                        $('span#stat').fadeIn(400).text('There was an error in submitting your request');
                        $('a#closeBox').show();
                        return false;
                    }
                }
            });
        });
    }
});

用于渲染 HTML 列表的 PHP

include('../dbconnect.php');
$closed = 'no';
$pdo = new PDO("mysql:host=$db_host;dbname=$db_name;", $db_user, $db_password);
$stmt = $pdo->prepare("SELECT RequestID, DateAdded, Graphic1Desc, Graphic2Desc, Graphic3Desc, ColorChart, Hex1, Hex2, Hex3, Hex4, Hex5, Hex6, Hex7, Hex8 FROM GraphicsRequest WHERE fulfilled = :done AND RequestID > 0");
print '<table id="pendingReqs">';
print '<tr id="headers">
            <td>Date</td>
            <td>Gr. 1</td>
            <td>Gr. 2</td>
            <td>Gr. 3</td>
            <td>Colors?</td>
            <td>HEX Vals 1-8</td>
            <td>Done</td>
            </tr>';
$stmt->bindParam(':done', $closed);
for ($r = 0; $r <= $stmt->rowCount(); $r++) {
    $stmt->execute();
    $row = $stmt->fetchAll(PDO::FETCH_ASSOC);
    $id = $row[$r]['RequestID'];
    $date = $row[$r]['DateAdded'];
    $d1 = $row[$r]['Graphic1Desc'];
    $d2 = $row[$r]['Graphic2Desc'];
    $d3 = $row[$r]['Graphic3Desc'];
    $chart = $row[$r]['ColorChart'];
    $h1 = $row[$r]['Hex1'];
    $h2 = $row[$r]['Hex2'];
    $h3 = $row[$r]['Hex3'];
    $h4 = $row[$r]['Hex4'];
    $h5 = $row[$r]['Hex5'];
    $h6 = $row[$r]['Hex6'];
    $h7 = $row[$r]['Hex7'];
    $h8 = $row[$r]['Hex8'];
    print '<tr>
                <td>' . $date . '</td>
                <td class="desc">' . $d1 . '</td>
                <td class="desc">' . $d2 . '</td>
                <td class="desc">' . $d3 . '</td>
                <td>' . $chart . '</td>
                <td>'
                 . $h1 . ', '
                 . $h2 . ',<br />'
                 . $h3 . ', '
                 . $h4 . ',<br />'
                 . $h5 . ', '
                 . $h6 . ',<br />'
                 . $h7 . ', '
                 . $h8 . '<br /></td>
                <td><input type="checkbox" class="update" name="stat[]" id="chk' . $id . '"/></td></tr>';
}
print '</table>';
print $id;

用于更新列表的 PHP

function updateStatus() {
    include('../../../dbconnect.php');
    $updated = false;
    $open = 'yes';
    $id = 0;
    try {
        $pdo = new PDO("mysql:host=$db_host;dbname=$db_name;", $db_user, $db_password);
        $stat = $pdo->prepare('SELECT RequestID FROM GraphicsRequest WHERE fulfilled = :open');
        $stat->bindParam(':open', $open);
        $_POST['stat'] = array();
        for ($r = 0; $r <= $stat->rowCount(); $r++) {
            $stat->execute();
            $row = $stat->fetchAll(PDO::FETCH_ASSOC);
            $id = $_POST['stat'][$row[$r]['RequestID']];
            if (ISSET($_POST['stat[' . $id . ']'])) {
                $open = 'no';
                $stmt = $pdo->prepare('UPDATE GraphicsRequest SET fulfilled = :open');
                $stmt->bindParam(':open', $open);
                $stmt->execute();
                $pdo = null;
                if ($stmt->rowCount() == 0)
                    echo('rowCount = 0');
                else
                    $updated = true;
                return $updated;
            }
        }
    }
    catch (PDOException $err){
        echo $e->getMessage();
        return $updated;
    }
}

Answer 1

我没有检查你所有的源代码，但是完全可以使用AJAX发送一些数据到服务器而不需要<form>标签。使用表单可以更轻松地一次接收所有“表单值”。