如何在页面加载时发出AJAX请求
[英]How to make an AJAX request on page load
问题描述
I need to call GetAllProperties() function during page loading instead of calling the GetAllProperties() function after page is fully loaded. 
我需要在页面加载期间调用GetAllProperties()函数，而不是在页面完全加载之后调用GetAllProperties()函数。 My code looks like this: 我的代码如下所示：
<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>
I really need your help because i am new in jQuery 我真的需要您的帮助，因为我是jQuery的新手
Thank you 谢谢
7 个解决方案
解决方案1
0 2016-08-17 11:03:25
Replace 更换
$(document).ready(function () {
GetAllProperties();
});
with just calling GetAllProperties() . 只需调用GetAllProperties() 。 you don't need DOM for ajax calls 您不需要DOM来进行Ajax调用
Then replace 然后更换
$("#MyDiv").empty();
$("#MyDiv").append($data);
with 与
$(document).ready(function () {
$("#MyDiv").empty();
$("#MyDiv").append($data);
});
Operate with DOM when it's ready. 准备就绪时，可以使用DOM进行操作。 Other actions you can do without DOM. 您可以在没有DOM的情况下执行其他操作。
解决方案2
0 2016-08-17 11:04:10
试试下面的代码来调用函数：$（window）.on（'load'，function（）{GetAllProperties（）;}）;
解决方案3
0
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();
解决方案4
0 2016-08-17 13:55:07
You want to start the function during loading and not afterwards? 您要在加载期间而不是之后启动该功能？ Then place the call GetAllProperties(); 然后进行调用GetAllProperties(); as most early as possible. 尽可能早。 Best place would be in <head> . 最好的地方是<head> 。
But keep in mind, you need to place it after the inclusion of the GetAllProperties function itself. 但是请记住，您需要在包含GetAllProperties函数本身之后放置它。 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. 否则，当您将脚本文件放在页面底部时，执行会因加载脚本文件而延迟，或者因加载DOM而延迟。
解决方案5
0 2016-08-17 14:01:25
If you want to call javascript function while page load than you should try following function : 如果要在页面加载时调用javascript函数，则应尝试以下函数：
window.onload = function() {
GetAllProperties();
};
解决方案6
0 2018-07-11 09:58:21
I've had the same problem. 我遇到了同样的问题。 I solved by calling the function inside the <body> tag in html 我通过在html中的<body>标记内调用函数来解决
<body onload="GetAllProperties()">
I hope it helps 希望对您有所帮助
解决方案7
0 2018-07-11 10:05:07
Call your method just after including jquery: 在包含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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.