Ajax Call to load different categories in WordPress not being picked up for my custom filter page

Question

Hey So I currently have a blog page that I have coded myself and am trying to upload it to a WordPress website it has the template name and type from WordPress see below

/*
 * Template Name: blog-page
 * Template Post Type: page
 */
get_header();

require('blog/conn.php');

now the require('blog/conn.php') works and connects to the connection file however when I try to do my Ajax Call it doesn't and it is from blog/loadfilter.php when I hosted this on my localhost it all worked however I am assuming since my wordpress rewrites my url into / instead maybe that is the reason it doesnt pick it up? I'm just confused why the conn works but filter wont and gets a alert 404 not found

my code looks like this first HTML buttons to change the catagories

<ul>
   <li class='listcat'>
      <input type="button" name="all news" id="allnews" onclick="window.location = url;" value="All News">
   </li>
   <li class='listcat'>
      <input type="button" name="technologies" id="technologies" onclick="loadXMLDoc('Technologies')" value="Technologies">
   </li>
   <li class='listcat'>
       <input type="button" name="business" id="business" onclick="loadXMLDoc('Business')" value="Business">
   </li>
   <li class='listcat'>
       <input type="button" name="lifestyle" id="lifestyle" onclick="loadXMLDoc('Lifestyle')" value="Lifestyle">
   </li>
</ul>

<div id="SBElite" class="row main-content-blogs-row">

And the JavaScript is

<script type="text/javascript">
  function loadXMLDoc(valueFilter) {

    var http = new XMLHttpRequest();
    var url = 'blog/loadfilter.php';
    var params = 'filter=' + valueFilter;
    http.open('POST', url, true);

    //Send the proper header information along with the request
    http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

    http.onreadystatechange = function() {
       if (http.readyState == XMLHttpRequest.DONE) {
           if (http.status == 200) {
              document.getElementById("SBElite").innerHTML = http.responseText;
           }
           else if (http.status == 400) {
              alert('There was an error 400');
           } 
           else if (http.status == 404) {
              alert('nope');
           }
           else {
              alert('something else other than 200 was returned');
           }
         }
      }
      http.send(params);
   }

   //back to the all news page
   var url = 'example.com/blog/';
</script>

Answer 1

部分帮助Johanson发现/blog/loadfilter.php不是来自WordPress的正确的完整相对路径所以我修复了它现在可以工作了