Привет, я немного запутался с методом ajax POST, я пытаюсь сделать запрос API, и, поскольку ответ имеет аналогичный параметр, я делаю его одной глобальной функцией, чтобы его можно было использовать другим моим html/js на другой странице, я знаю, что сообщение ajax сделает функцию, необходимую для обновления. но я не знаю, как использовать мою функцию ajax в html-форме, и с тех пор я напрямую использую кнопку для вызова функции запроса, но в конечном итоге она заблокирует следующий вызов запроса (GET/PUT/DELETE станет неисполняемым), так как я я не использую html-форму, могу ли я обновить функцию, не обновляя всю страницу, или вместо этого мне нужно будет использовать html-форму? любое объяснение или ответ будут благодарны
вот мой пример кода js
document.getElementById('confirmSubmit').addEventListener('click', function(){
var query = {};
query['a'] = 'a';
query['b'] = 'b';
query['c'] = 'c';
request(url, query, 'POST');
});
function request(url, query, method){
if (method == 'POST'){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name = "csrf-token"]').attr('content')
},
processData: false,
contentType: false,
cache: false,
});
}
else{
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name = "csrf-token"]').attr('content')
},
});
}
document.getElementById("div-overlay-w-100-h-100").style.display = 'block';
$.ajax({
url: url,
method: method,
dataType: "text json",
type: method,
data: query,
timeout: 900000,
success: function(response){
// LONG PROCESS HERE
},
error:function(rr){
console.info(rr);
}
});
}
вот мой html
<div class = "pcp-tabs-a-container" style = "margin-left: 10%;">
<div class = "pcp-add-container-a-container" style = "margin-top: -10px;">
<label for = "id" class = "form-label" style = "font-size: 16px;"><strong>ID*:</strong></label>
<input type = "text" name = "id" id = "id" class = "form-control" style = "max-width: 88%; cursor: text;" autocomplete = "off">
</div>
<div class = "pcp-add-container-a-container" style = "margin-top: -10px;">
<label for = "nama" class = "form-label" style = "font-size: 16px;"><strong>Name*:</strong></label>
<input type = "text" name = "nama" id = "nama" class = "form-control" style = "max-width: 88%; cursor: text;" autocomplete = "off">
</div>
<div class = "pcp-add-container-a-container" style = "margin-top: -10px;">
<label for = "desc" class = "form-label" style = "font-size: 16px;"><strong>Desc*:</strong></label>
<input type = "text" name = "desc" id = "desc" class = "form-control" style = "max-width: 88%; cursor: text;" autocomplete = "off">
</div>
<div class = "pcp-add-container-a-container" style = "margin-top: -10px;">
<label for = "info" class = "form-label" style = "font-size: 16px;"><strong>Info:</strong></label>
<input type = "text" name = "info" id = "info" class = "form-control" style = "max-width: 88%; cursor: text;" autocomplete = "off">
</div>
<div class = "pcp-add-container-a-container" style = "margin-top: -10px;">
<label for = "order" class = "form-label" style = "font-size: 16px;"><strong>Order:</strong></label>
<input type = "text" name = "order" id = "order" class = "form-control" style = "max-width: 88%; cursor: text;" autocomplete = "off">
</div>
</div>
<div>
<button class = "btn-primary" id = "confirmSubmit" style = "margin-bottom: 20px; height: 40px; width: 130px; margin-left: 10px; font-size: 16px; border-radius: 5px;">Submit</button>
</div>
Обновлено: благодаря отличному ответу @Ravi Makwana я получил именно ту проблему, которую ищу, я редактирую некоторую строку, чтобы сделать ее более совершенной, поскольку моя функция метода if else не позволит переопределить ajax. поэтому вместо того, чтобы настраивать ajaxsetup напрямую, я добавил его внутрь массива, как было предложено @Ravi Makwana
var ajaxSetup = {
url: url,
method: method,
dataType: "text json",
type: method,
data: query,
timeout: 900000,
success: function(response){
// LONG PROCESS HERE
},
error:function(rr){
console.info(rr);
}
};
if (method == 'POST'){
ajaxSetup.headers= {
'X-CSRF-TOKEN': $('meta[name = "csrf-token"]').attr('content')
};
ajaxSetup.processData= false;
ajaxSetup.contentType= false;
ajaxSetup.cache= false;
}
else {
ajaxSetup.headers= {
'X-CSRF-TOKEN': $('meta[name = "csrf-token"]').attr('content')
};
}
изменить приведенный выше код на
var ajaxSetup = {
url: url,
method: method,
dataType: "text json",
type: method,
data: query,
timeout: 900000,
success: function(response){
// LONG PROCESS HERE
},
error:function(rr){
console.info(rr);
}
};
if (method == 'POST'){
ajaxSetup['processData'] = false;
ajaxSetup['contentType'] = false;
ajaxSetup['cache'] = false;
}
@LelioFaieta я не знал, может ли dataType принимать только один параметр, но спасибо за ваше предложение, это дало мне больше знаний о параметре ajax
это может быть, если вы получаете текст и пытаетесь заставить jquery преобразовать его в json. В противном случае это только один, и это то, что вы получаете от конечной точки.
да, поскольку мой ответ от API - json, я удалил текст и вместо этого использовал json dataType
Вот может эта работа
Возможно, вы $.ajaxSetup
не переопределяете настройки
поэтому просто попробуйте создать переменную и установить все настройки в переменную
function request(url, query, method){
var ajaxSetup = {
url: url,
method: method,
dataType: "text json",
type: method,
data: query,
timeout: 900000,
success: function(response){
// LONG PROCESS HERE
},
error:function(rr){
console.info(rr);
}
};
if (method == 'POST'){
ajaxSetup.headers= {
'X-CSRF-TOKEN': $('meta[name = "csrf-token"]').attr('content')
};
ajaxSetup.processData= false;
ajaxSetup.contentType= false;
ajaxSetup.cache= false;
}
else {
ajaxSetup.headers= {
'X-CSRF-TOKEN': $('meta[name = "csrf-token"]').attr('content')
};
}
document.getElementById("div-overlay-w-100-h-100").style.display = 'block';
$.ajax(ajaxSetup);
}
спасибо за этот потрясающий ответ, он действительно решает мою проблему, теперь мой код может выполнять функцию POST/PUT/DELETE/GET динамически из одной глобальной функции, я немного отредактировал ваш ответ, так как if else с параметром метода все равно даст функциональный блок, потому что ajaxSetup не будет переопределять
dataType должен быть либо текстом, либо json, а не обоими