2017-03-09 1 views
1

ページが読み込まれたらデータを読み込み、必要なときにデータを更新するためのボタンをクリックできるようにしようとしています。今すぐボタンをクリックするだけで動作します。ここに私が持っているもののサンプルがあります。ページの読み込み時に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> 

ありがとう!

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

はまた、あなたが両方の場所に呼び出される関数へのAJAXロジックを抽出することができます:

答えて

2

は、あなたがあるとして、あなたのコードを残して、ちょうど負荷に clickイベントを発生させることができますどちらかこれを達成するために
0

.readyスコープにAJAXコールを入れる必要があります。現在、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); 
     } 

    }); 
} 
0

あなたが行く:

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

関連する問題