同时调用ajax函数onload和onclick

时间:2013-03-20 06:59:16

标签: javascript ajax

我在外部javascript文件中有一个Ajax函数:

ajax.js

function webservice(x){

   jQuery.ajax
            ({
                //some code here
            });

  Data = function(data){
                    if(x==1)
                            {
                                for(i=0;i<10;i++)
                                {
                                     webservice(i);
                                alert"Onload");
                                }
                            }
                            else 
                            if(x==5)
                            {
                                for(i=0;i<10;i++)
                                {
                                webservice(i);
                                alert ("Onclick");
                                }
                            }

        }

我有另一个html页面:

webservice.html

 <html>
 <title>Call web service</title>
 <head>
 <script type="text/Javascript" src="jquery-1.9.1.js"></script>
 <script type = "text/javascript" src="ajax.js"></script>
 <script>

 window.onload=function()
 {
   webservice(1)('onload');    //call 1 

 }

 </script>
 </head>

  <body>


  <input id="webservice"  type = "button" name = "webservice" value = "Call Webservice"       
  onclick="webservice(5)"/>


  </body>
  </html>

所以我想在onLoad和onclick of button中调用相同的函数,以便两个调用同时运行。 但是当onload运行例如3次并且我点击按钮然后onload停止并且onclick运行。 我希望onclick也可以运行和onload从第4次迭代开始,两者都应同时显示警报或1比1。 所以请帮助我。 提前谢谢。

也欢迎任何替代方法。

1 个答案:

答案 0 :(得分:0)

因为$.ajax是异步函数。在当前版本中,您的代码可能在AJAX调用结束之前调用。因此,你有一个行为。

要解决这个问题,必须将代码移动到成功回调中,如下所示:

function webservice(x) {
    var inputParam = x;
    jQuery.ajax({
        url: 'test.php',
        data: {},
        success: function (data) {
            if (inputParam  == 1) {
                for (i = 0; i < 10; i++) {
                    webservice(i);
                    alert("Onload");
                }
            } else if (inputParam  == 5) {
                for (i = 0; i < 10; i++) {
                    webservice(i);
                    alert("Onclick");
                }
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('an error occurred!');
        }
    });
}

此外,请避免使用内联JS。

替换

window.onload=function()
 {
   webservice(1)('onload');    //call 1 
 }

通过

$(document).ready(function(){
    webservice(1);//call 1 
});

并且

  <input id="webservice"  type = "button" name = "webservice" value = "Call Webservice"       
  onclick="webservice(5)"/>

通过

$('#webservice').click(function(){
    webservice(5);
});