用户ajax在没有" onClick功能的情况下获取数据"在javaScript中

时间:2017-04-07 06:33:07

标签: javascript ajax

我一直在寻找使用ajax而不使用onclick函数获取数据的示例,但我找到的大部分示例都是在onclick功能中。
这是我通过使用Onclick功能

成功获取数据的html
function loadDoc(url, cFunction) {
  var xhttp;
  xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
function myFunction(xhttp) {
  document.getElementById("offer").innerHTML =
  xhttp.responseText;
}

这是脚本

server {
   ...
   ## Deny illegal Host headers
   if ($host !~* ^(www.mydomain.com|xxx.xxx.xxx.xxx)$) {
      return 444;
   }
   ...
}

现在,我希望在没有onclick功能的情况下获取数据。
一旦我打开html,我想要数据显示 有人可以给我一些链接或给我一个例子??

7 个答案:

答案 0 :(得分:1)

您需要做的就是在其他地方调用该函数,例如,您可以将其设置为在加载窗口时调用。

Window.onload = loadDoc('getData.php',myFunction)

答案 1 :(得分:1)

您可以使用

<body onload="loadDoc('getData.php',myFunction);">

答案 2 :(得分:1)

第三种解决方案可能是在浏览器呈现页面后添加新的DOMContentLoaded事件以发送查询。

它应该是这样的:

document.addEventListener('DOMContentLoaded', loadDoc);

答案 3 :(得分:1)

不需要Body onload。您可以直接在JS中使用window onload函数

JS

window.onload = function() {
  loadDoc('getData.php',myFunction)
};

答案 4 :(得分:1)

您已将ajax调用绑定到事件onclick,其中您想要的是页面加载。 因此,请将onclick替换为 onload

<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>New document</title>

   <script type = 'text/javascript' src='js/jquery-2.2.0.js'></script>

   <script type ='text/javascript' src='js/testScript.js'></script>

<?php
include_once("database_conn_getOffers.php");
?>
</head>
<body>
  content goes here
   <aside id="offer" onload ="loadDoc('getData.php',myFunction)">
    &nbsp; click here
   </aside>
</body>

答案 5 :(得分:1)

如果相同域的页面,

下面的代码将理想地工作。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>New document</title>

   <script type = 'text/javascript' src='js/jquery-2.2.0.js'></script>

<script type ='text/javascript' src='js/testScript.js'></script>
<script type ='text/javascript'>
$(document).ready(function(){
$( "#offer" ).load( 'getData.php' );
});
</script>

<?php
include_once("database_conn_getOffers.php");
?>
</head>
<body>
   content goes here
   <aside id="offer" >
        &nbsp; click here
        </aside>
</body>

答案 6 :(得分:1)

window.onload事件中调用您的函数,而不是onclick

<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>New document</title>

   <script type = 'text/javascript' src='js/jquery-2.2.0.js'></script>

<script type ='text/javascript' src='js/testScript.js'></script>

<?php
include_once("database_conn_getOffers.php");
?>
</head>
<body>
   content goes here
   <aside id="offer">
        Your function has been executed onload of document
        </aside>
</body>

这是脚本

window.onload = function loadDoc(url, cFunction) {
  var xhttp;
  xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
function myFunction(xhttp) {
  document.getElementById("offer").innerHTML =
  xhttp.responseText;

};