使用jquery進行AJAX POST請求時的不同行爲

Question

這可能是我的錯誤理解，但我希望有人解釋我在這裏錯過的內容。

如果我有下面的實現使用Jquery來放置POST請求，請求不會被執行直到我執行「click」事件。

$(document).ready(function(){ 
    $("button").click(function(){ 
    $.post("demo_test_post.asp", 
    { 
     name:"Donald Duck", 
     city:"Duckburg" 
    }, 
    function(data,status){ 
     alert("Data: " + data + "\nStatus: " + status); 
    }); 
    }); 
}); 

但是如果我通過seperately定義它給匿名函數的名稱，然後將POST請求試圖即使在加載頁面發送。

<script> 
$(document).ready(function(){ 
    $("button").click(callFunction()); 
}); 
var callFunction = function(){ 
    $.post("demo_test_post.asp", 
    { 
     name:"Donald Duck", 
     city:"Duckburg" 
    }, 
    function(data,status){ 
     alert("Data: " + data + "\nStatus: " + status); 
    }); 
    }; 
</script> 

有人可以解釋我什麼我缺乏我的理解。對我來說，兩者都應該同樣的方式工作

感謝您閱讀

Answer 1

這可能是因爲你應該引用的功能，不能稱之爲

$(document).ready(function(){ 
    $("button").click(callFunction); // no parenthesis 
}); 

加上括號立即調用的函數，並返回結果，要引用僅

Answer 2

嘗試這種格式，而不是不要忘記添加id="btn"到您的按鈕

$('#btn').click(function(event){ 

     var formData = { 
      name:"Donald Duck", 
      city:"Duckburg" 
     } 

    $.ajax({ 
       type  : 'POST' , 
       url   : 'someurl', 
       data  : JSON.stringify(formData), 
       contentTYpe : 'application/json', 
       error  : function(data,status,error){ 
            console.log(data+': '+status+': '+ error); 
           }, 
     success  :  function(data,status){ 
        alert("Data: " + data + "\nStatus: " + status); 
    }); 
     }).done(function(apiResponse){ 
       //Do something when done 
     }); 
    });