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

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

javascript php jquery ajax forms

Javascript Ajax代码导致我的代码无法正常运行，为什么？,javascript,php,jquery,ajax,forms,Javascript,Php,Jquery,Ajax,Forms,我是一名网络开发新手，目前正在为学校网站开发一个模块。我已经创建了一个动态输入字段创建模块，现在我正在处理后端。问题是，当我正常使用代码时，前端就可以了，但是当我添加一些基本的AJAX代码使我的表单在不重新加载页面的情况下提交数据时，前端就会受到影响。当我点击ADD按钮创建新的输入字段时，它根本不起作用以下是我的代码示例： <html> <head> <title>Test</title> <script src="https://ajax

我是一名网络开发新手，目前正在为学校网站开发一个模块。我已经创建了一个动态输入字段创建模块，现在我正在处理后端。问题是，当我正常使用代码时，前端就可以了，但是当我添加一些基本的AJAX代码使我的表单在不重新加载页面的情况下提交数据时，前端就会受到影响。当我点击ADD按钮创建新的输入字段时，它根本不起作用

以下是我的代码示例：

<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>


试验
动态添加输入字段
$（文档）.ready（函数（）{
var i=1；
$（'#添加'）。单击（函数（）{
i++；
$（“#动态_字段”）。追加（“”）；
});
$（文档）.on（'click'，'btn_remove'，函数（）{
var按钮_id=$（this.attr（“id”）；
$（“#行”+按钮_id+”）.remove（）；
});
});

我要添加的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
    $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;
        }
    }
?>

$（文档）.ready（函数（）{
var i=1；
$（'#添加'）。单击（函数（）{
i++；
$（“#动态_字段”）。追加（“”）；
});
$（文档）.on（'click'，'btn_remove'，函数（）{
var按钮_id=$（this.attr（“id”）；
$（“#行”+按钮_id+”）.remove（）；
});
$（“#提交”）。单击（函数（）{
$.ajax({
类型：“POST”，
url:“check.php”，
数据：$（'#form1'）。序列化（），
成功：功能（数据）{
警报（数据）；
$（'form1'）[0]。重置（）；
}
});
});
});

php的操作页面如下：

$(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
    $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;
        }
    }
?>

您希望将处理程序绑定到表单提交，而不是单击。此外，请确保取消默认行为-以防止页面导航离开
$('#form1').submit(function(e) {
    $.ajax({
      // ...
    });

    e.preventDefault();
});

定义“不起作用”。它有什么作用？浏览器的开发控制台上是否有任何错误？JavaScript代码是否执行？是否发出了AJAX请求？服务器的响应是什么？具体发生了什么？我修改了代码。请检查您是否修改了代码，但尚未澄清问题。调试时，它是如何失败的？这里没有人能看到你电脑上发生了什么。你必须告诉我们，现在的问题是后端。我的php代码不工作。我对php不太熟悉，所以可能会有愚蠢的错误。感谢代码和文件与我使用的完全相同，它显示错误500，内部服务器错误