javascript - 为什么ajax请求不发送?
问题描述
我有用于为 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。
推荐阅读
- python - 如何在 Bokeh 中启用交互式 CheckboxGroup?
- token - 另一个合约的调用函数失败
- database - 调用未定义的方法 Illuminate\Database\Query\Builder::students()
- javascript - Javascript Else If 语句不评估第二个条件?
- c++ - 如何生成统一的随机二进制数以在 C++ 中成对计算汉明距离?
- javascript - DM 特定用户 ID
- c# - 立方体不会在统一碰撞时破坏?
- r - 在R中使函数内的for循环更快
- html - CSS - 表格 - TH 悬停集 TD 可见性
- java - Android – setText to Tabs in a switch case Statement