PHP jQuery ajax 提交按钮不起作用

Question

我想创建一个动态表单，使用jquery和ajax添加和删除字段。但不幸的是，我的插入按钮据说去插入.php不起作用。当我点击插入按钮时，什么也没发生。当插入按钮单击时，它将被重定向到插入.php数据存储在数据库中。这是我的编码

中继器.js

    jQuery.fn.extend({

        createRepeater: function (options = {}) {

            var hasOption = function (optionKey) {

                return options.hasOwnProperty(optionKey);

            };

            var option = function (optionKey) {

                return options[optionKey];

            };

            var generateId = function (string) {

                return string

                    .replace(/\[/g, '_')

                    .replace(/\]/g, '')

                    .toLowerCase();

            };

            var addItem = function (items, key, fresh = true) {

                var itemContent = items;

                var group = itemContent.data("group");

                var item = itemContent;

                var input = item.find('input,select');

                input.each(function (index, el) {

                    var attrName = $(el).data('name');

                    var skipName = $(el).data('skip-name');

                    if (skipName != true) {

                        $(el).attr("name", group + "[" + key + "]" + "[" + attrName + "]");

                    } else {

                        if (attrName != 'undefined') {

                            $(el).attr("name", attrName);

                        }

                    }

                    if (fresh == true) {

                        $(el).attr('value', '');

                    }

                    $(el).attr('id', generateId($(el).attr('name')));

                    $(el).parent().find('label').attr('for', generateId($(el).attr('name')));

                })

      

Answer 1

您只需将提交按钮类型更改为按钮<input type="submit" name="insert" class="btn btn-success" value="insert" />change to<input type="button" id="submit" name="insert" class="btn btn-success" value="insert" />和事件必须点击而不是提交$('#repeater_form').on('submit', function(event){}change to&nbsp;$('#submit').on('click', function(event){}所以页面不会重定向，数据后抛出ajax。

Answer 2

首先在 insert 中.php如果发布了“name”参数，则代码将运行，而在索引.php表单中没有名称为“name”的字段。因此，当您使用当前表单发布时.php插入文件不会显示任何结果作为提醒，您忘记了$，插入.php和索引之间存在数据库差异.phpconnect = new PDO("mysql:host=localhost;dbname=testing", "root", "");应该是$connect = new PDO("mysql:host=localhost;dbname=icompex", "root", "bptm2012");在ajax中，您最好添加错误处理，以便您可以在控制台浏览器中看到错误信息$.ajax({&nbsp; &nbsp; url:"insert.php",&nbsp; &nbsp; method:"POST",&nbsp; &nbsp; data:$(this).serialize(),&nbsp; &nbsp; success:function(data)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; $('#repeater_form')[0].reset();&nbsp; &nbsp; &nbsp; &nbsp; $("#repeater").createRepeater();&nbsp; &nbsp; &nbsp; &nbsp; $('#success_result').html(data);&nbsp; &nbsp; &nbsp; &nbsp; /*setInterval(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; location.reload();&nbsp; &nbsp; &nbsp; &nbsp; }, 3000);*/&nbsp; &nbsp; },&nbsp; &nbsp; // like this&nbsp; &nbsp; error : function(err){&nbsp; &nbsp; &nbsp; &nbsp; console.log(err);&nbsp; &nbsp; }});

Answer 3

删除。prevent默认（） 方法用于停止提交表单。删除它将允许表单将数据提交到event.preventDefault();insert.php

Answer 4

您可以使用 XMLHTTP 请求来发送请求。它比您的功能更容易，并且可以完全正常工作。在此处查看示例请求&nbsp;XMLHTTP 请求&nbsp;如果您成功，请告诉我