JS解決submit同時存入AJAX跟POST外部傳參先後順序問題-教學撰寫:徐嘉裕Neil hsu

這總情況是會發生在假設submit按鈕觸發後需要POST傳參到指定網址但又需要用AJAX儲存資料，就需要建立先後順序，雖然不建順序也是可以的，因為POST之後會有秒差足夠AJAX儲存資料，但如果發生系統負載過重導致AJAX未成完成資料儲存，網頁就已經action到其他頁面了，就會發生ajax資料未被存入的情況，解決方法就是鎖住外連設定先後順序，先存AJAX完成後再啟用submit()，這樣就不會有問題了，方法如下：


HTM結構

<form action='URL' method='post' id="print">

於form加上id="print"設定

<button type='submit' id='btn' class="btn btn-danger btn-block btn-lg"> 送出</button>

</form>

JS部分

 $("body").on("click", "#btn", function (e){

e.preventDefault();      //加上鎖住外連設定

 $.ajax({

    url: xoopsjsurl + '/modules/neillibrary/ajax.php',

    type: 'POST', 

    data: { id: 1,

                var:$avr                             

    },

        success: function(response) {

    $('#print').submit();  //啟用submit();

   

    }, 

    error: function() {

      console.log('ajax error!'); 

    }

 })

  }) 

這樣當點擊btn按鈕時e.preventDefault(); 會先鎖住外連不讓action網址連出去，然後等AJAX跑完後再用    $('#print').submit(); 讓外連啟用，所以就是先AJAX後action，確保資料都能完整建立。

教學撰寫：徐嘉裕 Neil hsu