将Ajax与Javascript混合在一起 - mixing Ajax with Javascript

mixing Ajax with Javascript

本文关键字：混合在一起 Javascript Ajax | 更新日期: 2023-09-27

我发现我不能将php与javascript混合使用，所以我尝试了AJAX。在下面的代码中，我希望 ajax 函数从 getcount.php 页面获取一个值并将其返回给调用方函数。下面的代码不起作用。错误在哪里？

<script type="text/javascript">
function getcount(day)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","getcount.php?"+day,true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    return xmlhttp.responseText;   
    }
}
 </script>
<script type="text/javascript">
$(function () {
var previousPoint;
var d1 = [];
 for (var i = 0; i <= 10; i += 1)
         d1.push([i, getcount(i)]);
  .
  .
  .

ajax 回调将是异步的，因此 getcount（）将返回 undefined，当回调返回时，它不会分配给任何东西

function getcount(day, arr) {
var xmlhttp;
...
xmlhttp.send();
xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    arr.push([day, xmlhttp.responseText]);   
    }
}
$(function () {
var previousPoint;
var d1 = [];
 for (var i = 0; i <= 10; i += 1)
     getcount(i, d1);
...

使用 jQuery，它会容易得多：

<script type="text/javascript">
  $(function () {
  var previousPoint, d1 = [];
  var getCount = function(day){
    $.get("getcount.php?"+day, function(data){
      d1.push([day, data]);
    });
  }
  for (var i = 0; i <= 10; i += 1)
    getcount(i)
});
</script>

将任何类型的 Ajax 查询与这种性质的循环混合在一起并不是一个好主意。它将创建一些有趣的竞争条件，因为 Ajax 请求是异步的 - 如前所述。

最好执行单个 ajax 请求并在 php 中处理循环 - 然后返回单个数组。但是，同样，默认情况下您需要了解这一点很重要，其余的过程 JavaScript 代码不会等待 Ajax 方法返回。

查看文档以获取帮助

Try using Jquery ajax which is very easier for maintenance and debugging. Here is a sample 
ajax code
$.ajax({
 type: 'POST',  // can be get also
 url: 'yourpage.php',  // change name
 data: id,  // some data if u need to pass
 success: function(data) {  // returns date
       $('.result').html(data); // result 
 }
}); 
For details  http://api.jquery.com/jQuery.ajax/
Thanks.