“等待响应” Ajax 调用时的消息

发布于 2024-11-08 03:22:02 字数 1111 浏览 1 评论 0原文

当我在 HEAD 部分使用 Ajax 调用（jquery）时，我在带有旋转圆圈的 Chrome 浏览器上发现“等待响应消息”。我不想要这种丑陋的样子。有办法避免这种情况吗？

PS：当我使用输入标签调用JavaScript（Ajax调用）函数时，

<input id="launcher" type="button" onfocus="go()" value="Go!"></input>

我看不到等待圈。因为我的程序应该自动调用该函数，所以我无法使用此方法。（如果我使用 document.getElementById("launcher").focus() 自动启动该函数，它再次显示等待循环.) 我猜想调用 JavaScript 函数有一些不同的上下文。

更新这是我的示例代码

<HEAD>
<SCRIPT TYPE="text/javascript">
function go() {
    $.ajax({
        url: "/myService",
        success: function(data){
            document.getElementById("result_area").innerHTML = data;
            go();
        }
    });
}
$(document).ready(function(){
    go() //Here I want to Comet call;
});
go(); //should start automatically.
</SCRIPT>
</HEAD>
<BODY>
    <!-- <input id="launcher" type="button" onfocus="go()" value="Go!"></input>
    This doesn't show the waiting circle. Why? Use different call context? -->        
<div id="result_area"></div>
</BODY>

原文

When I use Ajax call(jquery) in the HEAD section I find a "waiting for response message" on a chrome browser with revolving circle. I don't want this ugly look. Is there a way to avoiding this?

PS: When I use input tag to call the JavaScript(Ajax call) function like

<input id="launcher" type="button" onfocus="go()" value="Go!"></input>

I couldn't see a waiting circle. Cause my program should call the function automatically I couldn't use this method.(If I use document.getElementById("launcher").focus() to automatically start the function, It showed waiting circle again.) I guess there's a some different context to call JavaScript function.

Update Here is my sample code

<HEAD>
<SCRIPT TYPE="text/javascript">
function go() {
    $.ajax({
        url: "/myService",
        success: function(data){
            document.getElementById("result_area").innerHTML = data;
            go();
        }
    });
}
$(document).ready(function(){
    go() //Here I want to Comet call;
});
go(); //should start automatically.
</SCRIPT>
</HEAD>
<BODY>
    <!-- <input id="launcher" type="button" onfocus="go()" value="Go!"></input>
    This doesn't show the waiting circle. Why? Use different call context? -->        
<div id="result_area"></div>
</BODY>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一腔孤↑勇 2024-11-15 03:22:02

有一些问题我想强调

<input id="launcher" type="button" onfocus="go()" value="Go!"></input>

一下

<input  type="button" id="launcher" value="Go!" />

，

如果你想要一个图像而不是文本，那么应该在表单前放置一个 div 并使用 display:none
in ajax 调用您没有
成功：您再次调用 go()，这闻起来像递归函数
发送到服务器的数据?? data: 缺少 ajax 选项，
请提及 dataType (可选)，
如果您不想自动运行 ajax，
然后在某些事件上执行此操作（就像我在单击时所做的那样）绑定文档准备好在
head 中编写 javascript 代码（最佳实践是在之前编写）

我尽力告诉你基本的，这是我的

HTML

<div id="waiting" style="display: none;">
    <img src="images/ajax-loader.gif" title="Loader" alt="Loader" />
</div>
<form>
     // here is your form
</form>

jQuery方法

<SCRIPT TYPE="text/javascript">
$(document).ready(function(){
$('#waiting').show(500);
// instead run automatically now it will work on click of button
$('#launcher').click( function () {      
    $.ajax({
          url: "/myService.html", // or whatever page 
          // by the way where is data which you sent on server??
          data: { email : $('#email').val() }, // like i send the email to the serever
             dataType : "json",
             async : false,
          success: function(data){
            $('#waiting').hide();
            $("#result_area").html(data);
        }
    }); 
});
})

there are some issue i want to highlight

<input id="launcher" type="button" onfocus="go()" value="Go!"></input>

this should be

<input  type="button" id="launcher" value="Go!" />

then

if u want a image instead of text then put a div before form with display:none
in ajax call you are not writing url link with extension (.php or .html or .js )
in success : you again calling go(), this smell like recursive function
what data u r sending to the server?? data: is missing from ajax option
also mention dataType ( optional)
if you dont want to run ajax automatically then do it on some event( like i do on click)
bind with the document ready
write javascript code in head ( best practice to write just before </body> )

i tried my hard to tell you the basic, here is my way

HTML

<div id="waiting" style="display: none;">
    <img src="images/ajax-loader.gif" title="Loader" alt="Loader" />
</div>
<form>
     // here is your form
</form>

jQuery

<SCRIPT TYPE="text/javascript">
$(document).ready(function(){
$('#waiting').show(500);
// instead run automatically now it will work on click of button
$('#launcher').click( function () {      
    $.ajax({
          url: "/myService.html", // or whatever page 
          // by the way where is data which you sent on server??
          data: { email : $('#email').val() }, // like i send the email to the serever
             dataType : "json",
             async : false,
          success: function(data){
            $('#waiting').hide();
            $("#result_area").html(data);
        }
    }); 
});
})

回复收藏 0 原文