retrieve data from json object

[An]

Hi, I start learning javascript and ajax currently. The code index.php below is perform Ajax

 <!--- AJAX --->
        <script>
                function showData(str)
                {
                        if (str=="")
                        {
                                document.getElementById("txtHint").innerHTML="";
                                return;
                        } 
                        if (window.XMLHttpRequest)
                        {// code for IE7+, Firefox, Chrome, Opera, Safari
                                xmlhttp=new XMLHttpRequest();
                        }
                        else
                        {// code for IE6, IE5
                                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        xmlhttp.onreadystatechange=function()
                        {
                                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                        {
                                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                        }
                        }
                        xmlhttp.open("GET","getData.php?q="+str,true);
                        xmlhttp.send();
                }
        </script>

Next is the select dropdown menu perform query from my database and the script that will return the data within JSON object that will need for later use

 <select name="users" onchange="showData(this.value)">
                                <option value="">---Select Project---</option>
                                <?php
                                        // query projects
                                        $query_pr=mysql_query("SELECT * FROM GeneralInfo");
                                        // get project names and its corresponding revision number
                                        while($pr=mysql_fetch_assoc($query_pr)){
                                                echo '<option value="'.$pr['pRevNum'].'">'.$pr['pName'].'</option>';
                                        }

                                ?>
                                <!---jquery: ajax method--->
                                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
                                <script>
                                        $(document).ready(function(){
                                                $("button").click(function(){
                                                        $.getJSON("getData.php", function(obj) {
                                                                $.each(obj, function(key, value) {
                                                                        $("div1").append("<li>"+value.rev+"</li>");
                                                                });
                                                        });
                                                });
                                        });
                                </script>
                        </select>
                        ......
                        // Interested DATA will be displayed here
                        // but THIS IS WHERE I WANT THE DATA TO SHOW
                        // not WORK YET !!!
                        <button>GET DATA</button>
                        <div1></div1>

This is my getData.php

<?php
        header('Content-Type: application/json');
        $q=intval($_GET['q']);

        // establish connection
        .....

        // select the database
        ......

        $query ="SELECT DISTINCT BranchInfo.bName, BranchInfo.bRevNum, GeneralInfo.pName, GeneralInfo.pRevNum,BranchItemInfo.bIName, BranchItemInfo.bIRevNum
                         FROM `GeneralInfo`
                         INNER JOIN `BranchInfo`
                         ON GeneralInfo.bName=BranchInfo.bName 
                         AND GeneralInfo.bRevNum=BranchInfo.bRevNum
                         INNER JOIN `BranchItemInfo`
                         ON BranchInfo.bIName=BranchItemInfo.bIName 
                         AND BranchInfo.bIRevNum=BranchItemInfo.bIRevNum
                         AND GeneralInfo.pRevNum= '".$q."'";

        // initialize variable with the query
        $result = mysqli_query($connection,$query);


        $my_arr=array();
        // fectching data into array
        while($info = mysqli_fetch_array($result))
        {
                // convert to integer value if there is a bug after passing json_encode
                $rev[]=intval($info['bIRevNum']);
                $name[]=$info['bIName'];
                $my_arr[]=array('br'=>$name,'rev'=>$rev);
        }

        // json encode
        echo json_encode($my_arr);

        // close connection
        mysqli_close($connection);
?>

By using Ajax, I can be able to display correct data from my Database according to select option in the dropdown menu. However it is jump to the issue that I could not retrieve the specific data from Json Object after encod'ing within the getData.php. I visit my getData.php from a browser directly and I dont see the Json content, I know that it supposes to have the Json content after encod'ding cuz I have tested some examples before. Also I have noticed that the Json content is actually display on my index.php
I want to retrieve specific data from the Json Object after all. Please help me out, I really appreciates your time !!

Thanks