javascript - Jquery AJAX 检索 PHP 变量

Question

我有一个 php 脚本使我的页面加载缓慢，因为它从另一个站点获取 API 数据并对其进行解析，所以我想让它最后加载。我正在阅读 AJAX 是要走的路，因为它是异步的。到目前为止，下面是我的 AJAX 代码。我现在想做的就是让 AJAX 从 PHP 获取一个变量并显示它，但我无法让它工作。我想我真的很接近。

这是我希望它加载到的 DIV 和脚本触发器。

<div id="results"></div>
<script type="text/javascript">ajax_lastcount();</script>

这是 AJAX 脚本

<script type="text/javascript">
function ajax_lastcount() {
var hr = new XMLHttpRequest();
hr.open("GET", "/viewcount.php", true);
hr.setRequestHeader("Content-type", "application/json", true);
hr.onreadystatechange = function() {
   if(hr.readyState == 4 && hr.status == 200) {
       var data = JSON.parse(hr.responseText);
       var results = document.getElementById("results");
       results.innerHTML = data;

       }
       }
     }
     hr.send(null);
     results.innerHTML = "requesting...";
}
</script>

这里是viewcount.php页面

header("Content-type", "application/json");
$lastcount = "ten";
echo json_encode($lastcount);

Answer 1

使用 jQuery 这可以通过以下代码实现(在加载页面的 DOM 后自动调用):

$(document).ready(function() {
    $.ajax({
        url: '/viewcount.php',
        type: 'get',
        dataType: 'json',
    })
    .success(function(data) {
        $('div#results').html(data);
    });
});

如果您想执行简化的GET 或POST 请求，您也可以改为调用此方法:

$(document).ready(function() {
    $.get('/viewcount.php', {'optional_params_object':'value'})
    .success(function(data) {
        $('div#results').html(data);
    });
});

或

$(document).ready(function() {
    $.post('/viewcount.php', {'optional_params_object':'value'})
    .success(function(data) {
        $('div#results').html(data);
    });
});