在页面加载和单击时调用ajax更新数据

I am trying to have my ajax load the data once the page loads and be able to click on a button to update the data when need it. Right now it only works on the button click. Here is a sample of what I have.

我正在尝试让ajax在页面加载后加载数据，并能够在需要时单击按钮更新数据。现在它只在按钮的点击上起作用。这是我的样本。

The jQuery/ajax call:

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>

Thanks for looking!

谢谢你看!

3 个解决方案

#1

To achieve this you can either leave your code as is and just raise a click event on load:

要实现这一点，您可以将代码保留为原样，并在load中引发单击事件:

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

Alternatively you can extract the AJAX logic to a function which is called in both places:

或者，您可以将AJAX逻辑提取到两个地方都调用的函数中:

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

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

makeAjaxCall(); // on load

#2

You need to put your AJAX call in your .ready scope, it's currently blocked by the click function.

您需要将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);
         }

     });
}

#3

Here you go:

给你:

$(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>

#1