在頁面加載和點擊更新數據時調用ajax

Question

我想讓我的ajax在頁面加載後加載數據，並能夠在需要時點擊按鈕更新數據。現在它只適用於點擊按鈕。這是我所擁有的一個樣本。

jQuery的/ AJAX調用：

 $(document).ready(function() { 

     $("#update").click(function(e) { 
     e.preventDefault(); 

     $.ajax({ 
      url: "mycode", 
     dataType: "json", 
      data: { 
       //id: $(this).val(), 
      }, 
      success: function(result) { 

      alert(JSON.stringify(result)); 

      }, 
      error: function(result) { 
      console.log(result); 
      } 

     }); 
     }); 


    }); 

HTML：

 <a id="update" href="#" class="button">Update Data</a> 

    <div id="container"> 

     <div id="mydata"></div> 

    </div> 

爲尋找謝謝！

Answer 1

要做到這一點，你可以留下你的代碼是，只是提高對負載的click事件：

$("#update").click(function(e) { 
    e.preventDefault(); 
    // ajax logic here... 
}).click(); // < raise event on load 

另外，您可以提取AJAX邏輯到被稱爲在兩地功能：

function makeAjaxCall() { 
    // ajax logic here... 
} 

$('#update').click(function(e) { 
    e.preventDefault(); 
    makeAjaxCall(); 
}); // on click 

makeAjaxCall(); // on load 

Answer 2

您需要將您的AJAX呼叫放入您的.ready範圍內，它目前被click功能阻止。

$(document).ready(function() { 

    updatePage(); 

    $("#update").click(function(e) { 
    e.preventDefault(); 

    updatePage(); 
    }); 


}); 

function updatePage(){ 
    $.ajax({ 
     url: "mycode", 
    dataType: "json", 
     data: { 
      //id: $(this).val(), 
     }, 
     success: function(result) { 

     alert(JSON.stringify(result)); 

     }, 
     error: function(result) { 
     console.log(result); 
     } 

    }); 
} 

Answer 3

在這裏你去：

$(document).ready(function() { 
 
    $("#update").click(function(e) { 
 
     e.preventDefault(); 
 
     loadData(); 
 
     } 
 
     loadData(); 
 
    }); 
 

 
    function loadData() { 
 
    $.ajax({ 
 
     url: "mycode", 
 
     dataType: "json", 
 
     data: { 
 
      //id: $(this).val(), 
 
     }, 
 
     success: function(result) { 
 

 
      alert(JSON.stringify(result)); 
 

 
     }, 
 
     error: function(result) { 
 
      console.log(result); 
 

 
     }); 
 
    }); 
 

 
}

<a id="update" href="#" class="button">Update Data</a> 
 

 
<div id="container"> 
 
    <div id="mydata"></div> 
 
</div>