logo标签列表

JavaScript / Ajax在页面加载时执行div

javascripthtmlajax
3

我希望能在以下代码中“Onload”运行AJAX请求，而不是“onclick”。

我不想在body标签中添加onload属性。我希望它在不同的标签中，例如在一个div中。

我更改了这一行：

<input type='button' onclick='ajaxFunction(65)' value='Query MySQL'/>

我做到了

<div onload='ajaxFunction(65)'></div>

但它不起作用。

    <html>
<head>
<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(argId){
 var ajaxRequest;  // The variable that makes Ajax possible!

 try{
   // Opera 8.0+, Firefox, Safari
   ajaxRequest = new XMLHttpRequest();
 }catch (e){
   // Internet Explorer Browsers
   try{
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
   }catch (e) {
      try{
         ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }catch (e){
         // Something went wrong
         alert("Your browser broke!");
         return false;
      }
   }
 }
 // Create a function that will receive data 
 // sent from the server and will update
 // div section in the same page.
 ajaxRequest.onreadystatechange = function(){
   if(ajaxRequest.readyState == 4){
      var ajaxDisplay = document.getElementById('ajaxDiv');
      ajaxDisplay.innerHTML = ajaxRequest.responseText;
   }
 }
 // Now get the value from user and pass it to
 // server script.

 var queryString = "?q=" + argId ;
 ajaxRequest.open("GET", "getInputs.php" + 
                              queryString, true);
 ajaxRequest.send(null); 
}
//-->
</script>
</head>
<body>

<input type='button' onclick='ajaxFunction(65)' value='Query MySQL'/>

<div id='ajaxDiv'>Your result will display here</div>


</body>
</html>
1
div元素没有onload事件。 - epascarello
你可能想要考虑使用像jQuery这样的库，可以参考http://api.jquery.com/ready/开始。 - Alexis Wilke
3个回答
3

不可以将onload属性放在一个div元素上。最简单的方法是在元素后直接调用函数。

示例：

...
<div></div>
<script type="text/javascript">
   ajaxFunction(65);
</script>
...

或者更好的是放在</body>标签前面：
...
<script type="text/javascript">
   ajaxFunction(65);
</script>
</body>

…以便不会阻止后续内容的加载。

onload事件只能用于文档（body）本身、框架、图像和脚本。换句话说，它只能附加到body和/或每个外部资源上。div不是外部资源，它作为body的一部分加载，因此onload事件不适用于div。

0

将其包装在加载事件中

 window.addEventListener('load', function(event) {

function ajaxFunction(argId){
 var ajaxRequest;  // The variable that makes Ajax possible!

 try{
   // Opera 8.0+, Firefox, Safari
   ajaxRequest = new XMLHttpRequest();
 }catch (e){
   // Internet Explorer Browsers
   try{
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
   }catch (e) {
      try{
         ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }catch (e){
         // Something went wrong
         alert("Your browser broke!");
         return false;
      }
   }
 }
 // Create a function that will receive data 
 // sent from the server and will update
 // div section in the same page.
 ajaxRequest.onreadystatechange = function(){
   if(ajaxRequest.readyState == 4){
      var ajaxDisplay = document.getElementById('ajaxDiv');
      ajaxDisplay.innerHTML = ajaxRequest.responseText;
   }
 }
 // Now get the value from user and pass it to
 // server script.

 var queryString = "?q=" + argId ;
 ajaxRequest.open("GET", "getInputs.php" + 
                              queryString, true);
 ajaxRequest.send(null); 
}
});
0

只需在 div 后面放置您的函数调用，就像这样：

<script type="text/javascript">ajaxFunction(65)</script>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接