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>

在页面加载时调用ajax，然后单击以更新数据

3 个答案: