Question

我是网络开发新手，目前正在为学校网站制作模块。我创建了一个动态输入字段创建模块，现在我正在后端工作。问题是，当我正常使用代码然后前端很好，但是当我添加一些基本的AJAX代码以使我的表单提交数据而不重新加载页面时，前端会受到影响。当我单击“添加”按钮创建新的输入字段时，它根本不起作用。

以下是我的代码示例：

<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header>Dynamic Add Input Fields</header>
    <form name="form1" id="form1">
        <table class="table table-bordered" id="dynamic_field">
            <tr>
                <td><input type="text" name="name[]" id="name" class="form-control name_list"/></td>
                <td><input type="button" name="add" id="add" class="btn btn-success" value="ADD"></td>
            </tr>
        </table>
        <input type="button" name="submit" id="submit" value="Submit"/>
        <input type="reset" name="reset" id="reset" value="Reset"/>
    </form>
    <script type="text/javascript" >
    $(document).ready(function () {
        var i = 1;
        $('#add').click(function () {
            i++;
            $('#dynamic_field').append('<tr id="row'+i+'"><td><input id="name" type="text" name="name[]" class="form-control name_list"/></td><td><input type="button" name="remove" id="'+i+'" class="btn_remove" Value="X" /></td></tr>'); 
        });
        $(document).on('click','.btn_remove',function () {
            var button_id = $(this).attr("id");
            $("#row"+button_id+"").remove();
        });

    });
</script>

</body>
</html>

我想添加的AJAX代码在这里：

$(document).ready(function () {
    var i = 1;
    $('#add').click(function () {
        i++;
        $('#dynamic_field').append('<tr id="row'+i+'"><td><input id="name" type="text" name="name[]" class="form-control name_list"/></td><td><input type="button" name="remove" id="'+i+'" class="btn_remove" Value="X" /></td></tr>'); 
    });
    $(document).on('click','.btn_remove',function () {
        var button_id = $(this).attr("id");
        $("#row"+button_id+"").remove();
    });
    $('#submit').click(function () {
        $.ajax({
            type:"POST",
            url:"check.php",
            data:$('#form1').serialize(),
            success:function (data) {
                alert(data);
                $('form1')[0].reset();
            }
        });
    });
});

php的操作页面在这里：

<?php
    $conn = mysqli_connect('localhost','root','root','Test2');

    if(!$conn) {
        echo 'Couldn\'t connect to database'.mysqli_error();
    }
    $count = $length = '';
    $length = count($name[]);

    for($count=0 ; $count<$length ; $count++) {
        $sql = "INSERT INTO `check1` (name) VALUES ('$name[$count]')";
        $result = mysqli_query($conn,$sql);
        if(!$result) {
            echo 'Couldn\'t add data '.$count.mysqli_error();
            break;
        }
    }
?>

我想要实现的是创建一个表单，在该表单中可以在运行时创建无限数量的输入字段，并且在提交表单时，数据将存储在数据库中，而无需重新加载实际页面。对不起（如果有的话），感谢您的帮助和时间。

Answer 1

您希望将处理程序绑定到表单提交，而不是单击。此外，请务必取消默认行为 - 以防止页面导航。

$('#form1').submit(function(e) {
    $.ajax({
      // ...
    });

    e.preventDefault();
});

Ajax代码导致我的代码无法正常运行，为什么？

1 个答案: