Функция публикации AJAX без формы Не сброшена

Привет, я немного запутался с методом 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;
}

dataType должен быть либо текстом, либо json, а не обоими

Lelio Faieta 17.05.2022 11:22

@LelioFaieta я не знал, может ли dataType принимать только один параметр, но спасибо за ваше предложение, это дало мне больше знаний о параметре ajax

Archlean 17.05.2022 12:10

это может быть, если вы получаете текст и пытаетесь заставить jquery преобразовать его в json. В противном случае это только один, и это то, что вы получаете от конечной точки.

Lelio Faieta 17.05.2022 12:16

да, поскольку мой ответ от API - json, я удалил текст и вместо этого использовал json dataType

Archlean 17.05.2022 12:24
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
31
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот может эта работа

Возможно, вы $.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 не будет переопределять

Archlean 17.05.2022 12:13

Другие вопросы по теме