在页面加载和点击更新数据时调用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>