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 

$('#submit').on('click', function(event){}

所以页面不会重定向，数据后抛出ajax。

Answer 2

首先在 insert 中.php如果发布了“name”参数，则代码将运行，而在索引.php表单中没有名称为“name”的字段。

因此，当您使用当前表单发布时.php插入文件不会显示任何结果

作为提醒，您忘记了$，插入.php和索引之间存在数据库差异.php

connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");

应该是

$connect = new PDO("mysql:host=localhost;dbname=icompex", "root", "bptm2012");

在ajax中，您最好添加错误处理，以便您可以在控制台浏览器中看到错误信息

$.ajax({

    url:"insert.php",

    method:"POST",

    data:$(this).serialize(),

    success:function(data)

    {

        $('#repeater_form')[0].reset();

        $("#repeater").createRepeater();

        $('#success_result').html(data);

        /*setInterval(function(){

                    location.reload();

        }, 3000);*/

    },

    // like this

    error : function(err){

        console.log(err);

    }

});

Answer 3

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




Answer 4

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