Question

我的代码是这样的，我从一个教程网站上拿了它不记得在哪里请告诉我在这个巨大的代码中放置加载图标的地方我不明白。请通过jsfiddle或其他任何地方给我看一个例子。

  <script language = "javascript" type = "text/javascript">
     <!--
        //Browser Support Code
        function ajaxFunction(){
           var ajaxRequest;  // The variable that makes Ajax possible!

           try {
              // Opera 8.0+, Firefox, Safari
              ajaxRequest = new XMLHttpRequest();
           }catch (e) {
              // Internet Explorer Browsers
              try {
                 ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
              }catch (e) {
                 try{
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                 }catch (e){
                    // Something went wrong
                    alert("Your browser broke!");
                    return false;
                 }
              }
           }

           // Create a function that will receive data 
           // sent from the server and will update
           // div section in the same page.

           ajaxRequest.onreadystatechange = function(){
              if(ajaxRequest.readyState == 4){
                 var ajaxDisplay = document.getElementById('ajaxDiv');
                 ajaxDisplay.innerHTML = ajaxRequest.responseText;
              }
           }

           // Now get the value from user and pass it to
           // server script.

           var age = document.getElementById('age').value;
           var wpm = document.getElementById('wpm').value;
           var sex = document.getElementById('sex').value;
           var queryString = "?age=" + age ;

           queryString +=  "&wpm=" + wpm + "&sex=" + sex;
           ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
           ajaxRequest.send(null); 
        }
     //-->
  </script>

  <form name = 'myForm'>
     Max Age: <input type = 'text' id = 'age' /> <br />
     Max WPM: <input type = 'text' id = 'wpm' />
     <br />

     Sex: <select id = 'sex'>
        <option value = "m">m</option>
        <option value = "f">f</option>
     </select>

     <input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>

  </form>

  <div id = 'ajaxDiv'>Your result will display here</div>

Answer 1

首先，请查看this以获取有关就绪状态的更多信息。

我在ajaxRequest.open("GET", "ajax-example.php" + queryString, true);之前加载了一个加载，并在if (xmlhttp.readyState==4上将其删除。

<强> 1

因此，在您希望显示加载图标的位置添加HTML： <span id="loading"></span>

<强> 2

然后就在ajaxRequest.open...插入加载图片之前：

document.getElementById("loading").innerHTML = '<img src="loading.gif" />';

第3

在if (xmlhttp.readyState == 4里面放了：

document.getElementById("loading").innerHTML = '';

在这个ajax表格中放置加载图标的位置请有人告诉我吗？

1 个答案: