WordPress和Ajax

I've have created a custom table in mysql. I've entered a bit of test data just to see if I can pull some results. The query was successful when I ran it just in the template, so I know it works. As I have tried to convert it into a Ajax request seems that no data is being passed. I'm not sure what it is I am missing, or possibly an error I have entered somewhere, but it seems when I try to turn it into an Ajax request nothing happens.

Any ideas?

PHP

    $q = intval($_GET['q']);

$pull = $wpdb->get_results( 
    "
    SELECT ID,  department, contact, forms
    FROM referrals
    WHERE ID = '$q'
    "
);

foreach ( $pull as $requestdata) 
{
    echo $requestdata->department;
    echo '<br />';
    echo $requestdata->contact;
    echo '<br />';
    echo $requestdata->forms;
}

AJAX

<script>
                    function displayData(str) {
                      if (str=="") {
                        document.getElementById("txt").innerHTML="";
                        return;
                      }
                      if (window.XMLHttpRequest) {
                        // code for IE7+, Firefox, Chrome, Opera, Safari
                        xmlhttp=new XMLHttpRequest();
                      } 
                      xmlhttp.onreadystatechange=function() {
                        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                          document.getElementById("txt").innerHTML=xmlhttp.responseText;
                        }
                      }
                      xmlhttp.open("GET","<?php echo content_url(); ?>/themes/child/get-referral.php?q="+str, true);
                      xmlhttp.send();
                    }
                    </script>

HTML

                                <select name="users" onchange="displayData(this.value)">
                                  <option value="">Select a person:</option>
                                  <option value="1">Test 1</option>
                                  <option value="2"Test 2</option>

                                  </select>

                                <br>
                                <div id="txt"></div>

You need to change your ajax request to wp-admin/admin.ajax.php.

If you open that file you will find there is a constant setting named DOING_AJAX. Only the requests to this link can avoid the normal header being sent to browser because of setting DOING_AJAX to ture.

Actually you can debug like this: visit <?php echo content_url(); ?>/themes/child/get-referral.php?q=xx, you will find there are other info sent. thats why that ajax doesnt work.

Switched to this. Hopefully it helps someone else out.

HTML

<select id="mySelect" onchange="pullData()">
<option value="">Select</option>
<option value="options">options</option>
<option value="someother1">someother1</option>
<option value="someother_2">someother_2</option>
</select>

<div id="referral">Test</div>

AJAX / JS

<script>

function pullData() {
var xhttp;
//url variables
var url = "/wp-content/referrals/";
var selectedValueIs = document.getElementById("mySelect").value;

if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} 

xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("referral").innerHTML = xhttp.responseText;
}
};

xhttp.open("GET", url+selectedValueIs+'.txt' , true);
xhttp.send();
}
</script>