Question

我有一个简单的待办事项我正在建设。与大多数论坛问题（在index.html上直接选中复选框信息）不同，我正在从php文件中检索我的复选框数据，如图所示。如何在 item.html 上捕获该信息？欢迎任何帮助。

的index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>To Do List</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
        <link href="css/main.css" rel="stylesheet">

        <script
          src="https://code.jquery.com/jquery-3.2.1.min.js"
          integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
          crossorigin="anonymous">
        </script>

        <script src="js/item.js" type="text/javascript"></script>
    </head>

    <body onload="process()">
        <div class="list">
            <h1 class="header">My To Do</h1>
                <div id="todo-items"></div>
        </div>

        <!-- I add a new item to the checkbox list here -->
        <div class="list">
            <div id="item-add" >
                <input type="text" id="name" name="name" placeholder="Enter new item" class="input" autocomplete="off" required>
                <button id="add">Add Item</button><br /><br />
                <div id="status"></div>
            </div>
        </div>
    </body>
</html>

在 item.js

中

function fetch_data(){
    $.ajax({
        url:"/to-do-list/display.php",
        method:"GET",
        success:function(data){
            $('#todo-items').html(data);
        }
    });
}

fetch_data();

$(document).ready(function(){
    // $(document).on('click', '#add', function(){

    var items = [];
    //i'm struggling here
    $('#items').click(function() {

        if($('#items').is(':checked')) {

            console.log($(this).val());
            items.push($(this).val());
            console.log(items);
        }

        items = items.toString();

        $.ajax({
            url:"/to-do-list/insert.php",
            method:"POST",
            data:{items:items},
            success:function(data){
                console.log(data);
            }
        });
    });
});

display.php （我需要将复选框发送到 item.js 中的ajax）

<?php 
include 'db.php';
$sql = "SELECT * FROM items ORDER BY items.id ASC";
$result = mysqli_query($conn, $sql);

if(mysqli_num_rows($result) > 0){
    while ($row = mysqli_fetch_assoc($result)){
        echo "<ul class='items'>";
        echo "<li><input id='items' type='checkbox' /><label>";
        echo $row['name'];
        echo "</label></li><br>";
        echo "</ul>";
    }
    echo "<br/><br/>";
    echo "<input type='checkbox' /><label>Mark all as completed</label>";
} else {
    echo "There are no to-dos!";
}

?>

insert.php （这是我要将复选框数据发送到db的地方）

<?php
    include 'db.php';

    if(isset($_POST['items'])) { 
        $sql    =  "INSERT INTO done (done_items) VALUES('".$_POST['items']."')";
    } else {
        echo "Please enter an item";
    }


    $result = mysqli_query($conn, $sql);

    if(false === $result) {
        printf("error: %s\n", mysqli_error($conn));
    } else {
        echo "Successfully Inserted";
    }
?>

AJAX努力争取POST复选框数据（php）

0 个答案: