form.submit 與 button.click

最近在寫一個後臺，今天忽然出現一個奇怪的問題

當前端使用ajax後端post數據的時候，後端能夠正常處理，也能夠正常返回，但返回的時候不進入success部分，而是莫名其妙跳轉到error部分

ajax post的代碼以下：

function postdata() {
    var request = {
        key: 'value',
        key: value,
       
    };
    var encoded;
    encoded = $.toJSON(request);
    var jsonStr = encoded;
    var URL = '/api/task';
    $.ajax({
        url: URL,
        type: 'POST',
        data: jsonStr,
        dataType: 'json',
        contentType: 'application/json;charset=utf8',
        success: function (data) {
            var models = data;
            if (models.ok == true) {
                alert("well done!");
                window.location.href = "/task/list";
            } else {
                alert("return error");
                console.log(models);
                alert(models.info);
            }
        },
        error: function (xhr, error, exception) {
            alert("erro: request failed");
        }
    });
}

前端調試信息

確實cookie、host等信息

開始懷疑後端處理有問題，後臺使用Charles代理工具查看收發都正常，排除後端問題

無奈本人剛開始接觸前端，查不出緣由，請教大神，設置斷點，逐步排查，發現會有時請求成功

查看頁面的html代碼，發現我在頁面點擊提交按鈕使用的是button.click()

$(document)
    .ready(function() {
         $(".primary.button").click(function() {
              postdata()
           });
     })
 ;

而我頁面上的是在一個表單中，這種方法使得頁面在提交post請求以後，沒有等到數據返回，頁面就刷新了一次，而設置斷點的時候，恰巧就避開了這個坑

修改代碼

$(document)
     .ready(function() {
           $("form").submit(function() 
                    postdata();
                    return false   //阻止自動刷新
                });
      })

果真能夠，這裏記錄下，前端還不是很懂，還有不少要學習