0

我有四个单选按钮来选择一个国家。当用户单击任何单选按钮时，我使用 Ajax 获取该国家/地区的状态。为了向最终用户展示我们正在处理数据，我使用了滚动图像（gif）。

当任何用户单击国家广播时，在方法（广播的 onclick 事件）loadStates()中，我通过将其显示属性设置为“内联”来启用滚轮图像。然后使用 Ajax 向服务器发送一个请求（为了显示一个工作示例，我删除了该代码并插入了一个“睡眠”，只是为了表明它需要一些时间）。得到结果后，我立即将显示属性设置为“无”。

但是它不起作用。谁能告诉我如何解决它？

PS：我暂时不想使用jQuery，请只使用Javascript。

<html>
<head>
 <script type="text/javascript">

    window.onload = init;

    function init() {
       countryFunctions();
    }//init

    function countryFunctions() {
       var inputElems = document.forms[0].getElementsByTagName('input');
       for (var i = 0, j = inputElems.length; i < j; i++) {
          var elemName = inputElems[i].name;
          if ( typeof elemName != 'undefined' && elemName === 'country' ) {
             //inputElems[i].onmouseup = showRoller;
             inputElems[i].onclick = loadStates;
          }//if
       }//for
       return;
    }

   function loadStates() {
       var action = 'get_states';
       document.getElementById("fSpinner").style.display = "inline";
       //alert("hi........");
       var result = doLoad(action);
       document.getElementById("countryStates").innerHTML = result;
       document.getElementById("fSpinner").style.display = "none";
   }

   function doLoad(action) {//A dummy function just show what it returns (actually it is Ajax)
      sleep(7000);
      var value = "\
        <p>\
           Which state of the country would you like to go?\
        </p>\
        <select name=\"state\">\
            <option value=\"1362\">Delhi</option>\
            <option value=\"481\">Kerala</option>\
            <option value=\"666\">Punjab</option>\
            <option value=\"668\">Kashmir</option>\
       </select>";
      return(value);
   }

   function sleep(ms) {
      var unixtime_ms = new Date().getTime();
      while(new Date().getTime() < unixtime_ms + ms) {}
   }
 </script>
 <style type="text/css">
   #fSpinner { display:none; }
 </style>
</head>
<body>
  <form>
    <p>What country do you belong to?</p>
    <p>
       <input name="country" value="in" type="radio">&nbsp;India&nbsp;&nbsp;&nbsp;
       <input name="country" value="au" type="radio">&nbsp;Australia&nbsp;&nbsp;&nbsp;
       <input name="country" value="nz" type="radio">&nbsp;New Zealand&nbsp;&nbsp;&nbsp;
       <input name="country" value="my" type="radio">&nbsp;Malaysia&nbsp;&nbsp;&nbsp;
       <span id="fSpinner">
           <img style="vertical-align:text-bottom;" src="http://107.20.148.146/shak/images/roller.gif">
       </span>
    </p>
    <div id="countryStates"></div>
  </form>
</body>
</html>
4

1 回答 1

0

该sleep函数“阻止”浏览器，在函数返回之前页面不会刷新。

要模拟异步过程，例如 AJAX 调用，请setTimeout改用：

 function loadStates() {
   var action = 'get_states';
   document.getElementById("fSpinner").style.display = "inline";

   setTimeout( function() {
     var value = "\
       <p>\
          Which state of the country would you like to go?\
       </p>\
       <select name=\"state\">\
           <option value=\"1362\">Delhi</option>\
           <option value=\"481\">Kerala</option>\
           <option value=\"666\">Punjab</option>\
           <option value=\"668\">Kashmir</option>\
      </select>";
      document.getElementById("countryStates").innerHTML = value;
      document.getElementById("fSpinner").style.display = "none";
   }, 7000) ;
 }
于 2013-03-03T08:04:12.410 回答