我有用于为 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请求？
我找到了我的问题的解决方案和答案！您可以查看、测试并留下您对找到的解决方案的意见。
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。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句