我有一个简单的 Laravel 应用程序用于任务管理。它包括一个带有四个字段的表单:一个用于 CSRF 令牌,两个用于 ID 的隐藏字段,以及一个用于获取任务标题的输入字段。要添加子字段,请执行以下操作:
我有一个简单的 Laravel 应用程序用于任务管理。它包含一个包含四个字段的表单:一个用于 CSRF 令牌,两个用于 ID 的隐藏字段,以及一个用于获取任务标题的输入字段。
为了提交表单,我使用了 AJAX。但是,我遇到了一个问题,即每个 AJAX 请求都会发送两次。此行为在应用程序中的所有 AJAX 请求中都存在。
这是我的代码的简化版本:
JS
$(()=> {
$('.add-card').one('click',function(e) {
e.preventDefault();
var form = $(this).closest('form')[0];
let url = baseUrl + ":8000/api/task/store"
let data = retrieveFormData(form)
let _token = data['csrf-token']
ajaxCRUD("POST", url, {...data},_token, (response) => {
console.log(response);
});
});
});
function ajaxCRUD(method, url, data, token,successFunc) {
$.ajax({
type: method,
url: url,
data: data,
beforeSend: function(xhr) {
xhr.setRequestHeader('X-CSRF-TOKEN', token);
},
success: function (response) {
if (successFunc) {
successFunc(response);
}
},
error: function (xhr, status, error) {
console.error(xhr.responseText);
},
});
}
function retrieveFormData(form) {
let formElements = $(form).find('input, select, textarea');
let formData = {};
formElements.each((index, element) => {
let name = $(element).attr('name');
let value = $(element).val();
formData[name] = value;
});
return formData;
}
HTML:
<div class="card fit-content px-1 py-2 position-absolute top-0 left-0 card-title-form" >
<form action="" method="post" class="task-title-form">
<input type="number" name="stage_id" class="form-control" value="{{$stage->id}}" hidden>
<input type="number" name="project_id" class="form-control" value="{{$project->id}}" hidden>
<input type="text" name="csrf-token" class="form-control" value="{{csrf_token()}}" hidden>
<input type="text" name="task_title" class="form-control" id="card-title" placeholder="Enter a title for this card...">
<div class="my-2">
<button class="btn btn-primary add-card" >Add</button>
<span class="btn font-14 close-title-form"><ion-icon name="close-outline"></ion-icon></span>
</div>
</form>
</div>
尝试过但没有成功的解决方案: