单击按钮后加载spin.js，这将启动长时间运行的PHP脚本并在同一页面中返回结果

Question

I am building on my original post: Clicking a button to run casperJS in PHP and echo results in same PHP page with button . I essentially have a button in an HTML button that when clicked activates a casperjs AJAX, which then returns and prints the script results on the same web page. I would like to activate the spin.js script to have a loading graphic as the casperjs script runs and eventually returns results (takes about 10-15 seconds). I have read: How to show loading spinner in jQuery? , but I am wondering if I can do this without jQ; I also read: Loading spin.js with require.js and Show loading gif while waiting for ajax response .

As of right now I can get the spinner to start when I click the button, but when the results return, the spinner does not stop. I have this in my HTML:

<div class='main'>
      <style>
        .spinner {
          position: fixed;
          top: 50%;
          left: 50%;
        }
      </style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
      <script src="spin.js"></script>
      <script>
        var opts = {
            lines: 11, // The number of lines to draw
              length: 10, // The length of each line
              width: 5, // The line thickness
              radius: 13, // The radius of the inner circle
              corners: 0, // Corner roundness (0..1)
              rotate: 0, // The rotation offset
              direction: 1, // 1: clockwise, -1: counterclockwise
              color: '#000', // #rgb or #rrggbb or array of colors
              speed: 1, // Rounds per second
              trail: 60, // Afterglow percentage
              shadow: false, // Whether to render a shadow
              hwaccel: false, // Whether to use hardware acceleration
              className: 'spinner', // The CSS class to assign to the spinner
              zIndex: 2e9, // The z-index (defaults to 2000000000)
              top: '50%', // Top position relative to parent
              left: '50%' // Left position relative to parent
            };

        var spinner = null;
        var spinner_div = 0;

        $(document).ready(function() {

          spinner_div = $('#spinner').get(0);

          $("#button_AJAX").on('click', function(e) {
            e.preventDefault();
            if(spinner == null) {
              spinner = new Spinner(opts).spin(spinner_div);
            } else {
              spinner.spin(spinner_div);
            }
          });

        });
      </script>
      <div id='spinner' class='spinner'></div>
    </div>

And this is the ajax script which is activated when the button is clicked:

// 1: Create the request 
var myRequest;

// feature check!
if (window.XMLHttpRequest) {  // does it exist? we're in Firefox, Safari etc.
    myRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // if not, we're in IE
    myRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

// 2: Create an event handler for our request to call back
myRequest.onreadystatechange = function(){
    if (myRequest.readyState === 4) {
        var p = document.createElement("p");
        var t = document.createTextNode(myRequest.responseText);
        p.appendChild(t);
        document.getElementById("mainContent").appendChild(p);
    }
};

// open and send it
myRequest.open('GET', 'phpscript.php', true);
// any parameters?
myRequest.send(null);

The phpscript.js is what actually starts the casperjs script:

<?php
echo exec("/home/user/casperjs/bin/casperjs /full/path/to/your_script.js"); 
?>

If I use this:

var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

Will I have to place it inside the ajax script that is executed when the button is clicked? Or in the main HTML page? I am not sure how to proceed.

Answer 1

I was able to start a loading spin gif when I click the AJAX button which executes casperjs in PHP and prints results back in the HTML page. I used these two sources: jsfiddle and AJAX-Get data from php HTML now looks like this:

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery-2.1.1.min.js" type="text/javascript"></script>
        <title>casperjs Automated Testing Utility</title>
    </head>
    <center>
    <body>
    <div id="mainContent">
<p>Welcome to the casperjs Automated Testing Utility</p>
<br>
  <button id="button_AJAX">Run casperjs AJAX</button>
    </div>
    <br>
    <div id="loading"></div>
    <script type="text/javascript">
    $('#button_AJAX').click(function () {
        // add loading image to div
       $('#loading').html('<img src="loader_image.gif"><br><i>Web harvesting in progress, please wait for results.</i>');
        // run ajax request
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "casperjscript.php",
            success: function (data) {
                setTimeout(function () {
                    $('#loading').html(data.results);
                });
            }
        });
    });
    $("#button_AJAX").click(function() {$("#button_AJAX").text("casperjs executed");});
    </script>
    </div>
</center>
    </body>
</html>