沒有表單的AJAX發布功能未重置

您好，我對 ajax POST 方法有點困惑，我嘗試發出 api 請求，并且由于回應具有類似的引數，因此我將其作為一個全域函式，因此它可以被其他頁面中的其他 html / js 使用，我知道ajax post 將使重繪 所需的功能。但我不知道如何在 html 表單上使用我的 ajax 函式，因為我直接使用按鈕呼叫請求函式，但它最終會阻止下一個請求呼叫（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.log(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.log(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.log(rr);
    }
};
if (method == 'POST'){
    ajaxSetup['processData'] = false;
    ajaxSetup['contentType'] = false;
    ajaxSetup['cache'] = false;
}

uj5u.com熱心網友回復：

這是也許這項作業

您可能$.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.log(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);
    }

標籤：javascript html jQuery 阿贾克斯

上一篇：來自外部檔案的json陣列未在反應中設定狀態

下一篇：更改影像默認白色背景