Ajax Javascript函数可在按下按钮时执行PHP代码

Question

I'm running the following Javascript function (from within a PHP script hence the echo):

echo'<script type="text/javascript">';  
echo'//Execute PHP Copy Script';
echo'function do_copy(){';
echo'var xhReq = new XMLHttpRequest();';
echo'var request = "../wp-content/plugins/upCustomBadges/copy.php" // prepare a request to script';
echo'xhReq.open("GET", request, false);  // send a request';
echo'xhReq.send(null);';
echo'document.getElementsByID("results").innerHTML=xhReq.responseText  /// display results';
echo'console.log(callback.toString());';
echo'}';
echo'<p><input type="button" value="Copy Badges" name="copy_badges"  onclick="do_copy()" class="button-primary"></p>';
echo'<div id="results">Results';
echo'</div>';

It triggers a PHP script. The script works and the copy function gets triggered. However, I don't get any feedback from the Javascript function. I implemented a callback to console.log as you can see. It states:

Uncaught ReferenceError: do_delete is not defined options-general.php?page=upCustomBadges:177    onclick

Any help would be appreciated!

Answer 1

First display your result only when your scuccessful ajax response

  //if success on ajax response
  echo 'if (xhReq.readyState==4 && xhReq.status==200){'; 
  echo    'document.getElementsByID("results").innerHTML=xhReq.responseText';  
  echo '}';

Second your callback is not defined any where.

Answer 2

I went with a workaround now. Works like a breeze, even tho it's not as pretty. But good enough for now:

<script type="text/javascript"> 
            function do_copy(){
                var xhReq = new XMLHttpRequest();
                var request = "../wp-content/plugins/upCustomBadges/copy.php";
                xhReq.open("GET", request, false);
                xhReq.send(null);
                var serverResponse = xhReq.responseText;
                alert(serverResponse);
                }
</script>