发表新帖
发表新帖

How to make an AJAX request on page load

前端 未结
关注
7 1422
耶瑟儿～
耶瑟儿～ 2021-01-28 01:47

I need to call GetAllProperties() function during page loading instead of calling the GetAllProperties() function after page is fully loaded. My code l

相关标签:
7条回答
  • 生来不讨喜
    2021-01-28 02:01

    You want to start the function during loading and not afterwards? Then place the call GetAllProperties(); as most early as possible. Best place would be in <head>.

    But keep in mind, you need to place it after the inclusion of the GetAllProperties function itself. And the function has to be declared in the same file.

    Otherwise the execution is delayed by loading the script file, or it is delayed by the loading DOM, when you place it at the bottom of your page.

    0 讨论(0)
  • 夕颜
    2021-01-28 02:01

    Try this code to call function: $(window).on('load', function() {GetAllProperties();});

    0 讨论(0)
  • 轮回少年
    2021-01-28 02:09

    I've had the same problem. I solved by calling the function inside the <body> tag in html

    <body onload="GetAllProperties()">

    I hope it helps

    0 讨论(0)
  • 余生分开走
    2021-01-28 02:10

    Call your method just after including jquery: 

    <script src="/path/to/jquery.min.js"></script>
<script>
      function GetAllProperties() {    
    $.ajax({
        cache: false,
        url: '/Home/GetAllProperties',
        type: 'GET',
        contentType: "application/json; charset=utf-8",
        success: function (response) {
            if (response.list.length > 0) {
                console.log(response.list)
                var $data = $('<table id="mytable"  class="table  table-striped"> </table>');
                var header = "<thead><tr><th>Property Name</th><th>Edit</th></tr></thead>";
                $data.append(header);
                $.each(response.list, function (i, row) {
                    var $row = $('<tr/>');
                    $row.append($('<td/>').html(row.PropertyName));
                    $hidden = $(' <input type="hidden" name="hid" value= "' + row.PropertyId + '">');
                    $row.append($hidden);
                    $editButton = $("<button class='editbtn' id='mybtn'>Edit</button>");    
                    $row.append($editButton);
                    $deleteButton = $("<button class='deletebtn' id='delbtn'>Delete</button>");    
                    $row.append($deleteButton);
                    $data.append($row);
                });        
                $("#MyDiv").empty();
                $("#MyDiv").append($data);
            }
            else {

            }
        },
        error: function (r) {
            alert('Error! Please try again.' + r.responseText);
            console.log(r);    
        }
    });    
}    
  GetAllProperties();    
<script>
    0 讨论(0)
  • 陌清茗
    2021-01-28 02:19

    If you want to call the function while the page is loading you have to remove the 

    $(document).ready(function () {   
        GetAllProperties();    
    });

    just call the function

    GetAllProperties();
    0 讨论(0)
  • 心在旅途
    2021-01-28 02:23

    Replace

    $(document).ready(function () {   
        GetAllProperties();    
});

    with just calling GetAllProperties(). you don't need DOM for ajax calls

    Then replace

    $("#MyDiv").empty();
$("#MyDiv").append($data);

    with 

    $(document).ready(function () {   
    $("#MyDiv").empty();
    $("#MyDiv").append($data);
});

    Operate with DOM when it's ready. Other actions you can do without DOM.

    0 讨论(0)
 看不清?
提交回复
热议问题