WordPress Ajax调用无法正常工作

Question

I'm using WordPress & trying to add some AJAX.

I have a file in [template]/js/ajax.js

  function readSearch(){        
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      alert(xhttp.status);
    if (xhttp.readyState == 4 && xhttp.status == 200) {         
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("POST", "ajax_info.php", true);
  xhttp.send(); 
}

I've put ajax_info.php everywhere and I still get a xhttp.status == 404 when the button is clicked

<p class="submit"><input type="submit" name="submit" id="submit" 
    class="button button-primary" value="Leave it to chance" onclick="readSearch()" /></p>

I have test for the file to be displayed in

I'm not sure what I'm missing to get the call to work.

Answer 1

Note : You need to add the full path to your php file as :

There are two ways to do it :

1) Mentioning Path Manually :

 function readSearch(){        
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      alert(xhttp.status);
    if (xhttp.readyState == 4 && xhttp.status == 200) {         
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("POST", "wp-content/themes/template_name/ajax_info.php", true);
  xhttp.send(); 
}

2) Using WordPress Functions To Add Path (Which Works In Dynamic Way) :

 function readSearch(){        
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      alert(xhttp.status);
    if (xhttp.readyState == 4 && xhttp.status == 200) {         
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("POST", <?php echo get_template_directory_uri()."/ajax_info.php"; ?>, true);
  xhttp.send(); 
}