Question

我具有用于为html表单的任何输入创建事件的示例函数。

功能代码：

function event(form, element) {
    var timer;
    $(element).keyup(function () {
        clearTimeout(timer);
        if ($(element).val()) {
            timer = setTimeout(function() {
                form.submit(function (e) {
                    e.preventDefault();
                    $.ajax({
                        url     : form.attr('action'),
                        type    : form.attr('method'),
                        data    : form.serialize(),
                        dataType: 'json',
                        success : function (json)
                        {
                            console.log(json);
                        },
                        error: function(error)
                        {
                            console.log(error);
                        }
                    });
                });
                $(element).css("border-color","green");
                setTimeout(function() {
                    $(element).css("border-color", "#ccddea");
                }, 3000);
            }, 5000);
        }
    });
}

用法：

var form = $('#form');

event(form, '#name');
event(form, '#lastname');

HTML表单代码：

<form action="http://localhost/app/form.php" method="POST" enctype="multipart/form-data" id="form">
    <div class="row bottom-mrg">
        <div class="col-md-6 col-sm-6">
            <div class="input-group">
                <input type="text" class="form-control" name="name" placeholder="Name" id="name">
            </div>
        </div>
        <div class="col-md-6 col-sm-6">
            <div class="input-group">
                <input type="text" class="form-control" name="lastname" placeholder="Last Name" id="lastname">
            </div>
        </div>
    </div>
    <button type="submit">Send</button>
</form>

我的 form.php 代码：

<?php

$name = $_POST['name'] ?? null;

if(isset($name)) {
    echo $name;
}

但是在超时后表单未发送。当我仅使用form.submit()时有效，但是使用ajax()的请求无效。在我的情况下如何发送Ajax请求？

Answer 1

我找到了解决方案并回答了我的问题！您可以查找，测试并保留对找到的解决方案的意见。

JavaScript代码：

var form = $('#form');

function event(form, element) {
    var timer;            
    $(element).on('keyup', function () {
      clearTimeout(timer);
      timer = setTimeout(function () {
        axios({
            method: form.attr('method'),
            url: form.attr('action'),
            data: form.serialize(),
            config: { headers: {'Content-Type': 'multipart/form-data' }}
        })
        .then(function (response) {
            console.log(response.data);
        })
        .catch(function (response) {
            console.log(response);
        });

        $(element).css("border-color","green");
        setTimeout(function() {
            $(element).css("border-color", "#ccddea");
        }, 3000);
      }, 5000);
    });
    $(element).on('keydown', function () {
      clearTimeout(timer);
    });
}

event(form, "#name");
event(form, "#lastname");

我使用了 axios ，但也可以使用 ajax 。

为什么ajax请求不发送？

1 个答案: