如何在页面加载时发出AJAX请求

时间:2016-08-17 10:54:29

标签: javascript php jquery ajax

我需要在页面加载期间调用GetAllProperties()函数,而不是在页面完全加载后调用GetAllProperties()函数。我的代码如下所示:

<script type="text/javascript">
    $(document).ready(function () {   
        GetAllProperties();    
    });
    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);    
            }
        });    
    }    
</script>

我真的需要你的帮助,因为我是jQuery的新手

谢谢

7 个答案:

答案 0 :(得分:0)

替换

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

只需拨打GetAllProperties()即可。你不需要DOM来进行ajax调用

然后替换

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

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

准备好后,使用DOM进行操作。没有DOM你可以做的其他行动。

答案 1 :(得分:0)

尝试使用此代码调用函数: $(window).on('load',function(){GetAllProperties();});

答案 2 :(得分:0)

如果您想在页面加载时调用该功能,则必须删除

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

只需调用函数

GetAllProperties();    

答案 3 :(得分:0)

您希望在加载期间启动功能,而不是之后启动?然后尽可能早地拨打电话GetAllProperties();。最好的地方是<head>

但请记住,您需要将置于后加入GetAllProperties函数本身。并且该函数必须在同一个文件中声明。

否则,通过加载脚本文件会延迟执行,或者当您将其放在页面底部时,加载DOM会延迟执行。

答案 4 :(得分:0)

如果你想在页面加载时调用javascript函数,你应该尝试以下函数:

this.searchBy = element(by.model('searchCompanyComponent.searchByValue'));

this.clickTheProvidedValueInSearchByDropdown = function (selectedItem) {
    var x = this.searchBy;
    this.searchBy.all(by.tagName('option')).filter(function (elem, index) {
        return elem.getText().then(function (text) {
            return text.toUpperCase().replace(/ |-/g, '') === selectedItem.toUpperCase().replace(/ |-/g, '');
        });
    }).getText().then(function (text) {
        console.info(x); // 1
        console.log(this.searchBy); // 2            
    });


};
 console.log(this.searchBy); //3

答案 5 :(得分:0)

我遇到了同样的问题。我通过在html中的<body>标记内调用函数来解决

<body onload="GetAllProperties()">

我希望对您有帮助

答案 6 :(得分:0)

在包含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>