ColdFusion结构和Ajax

I have a simple form with a select and a text box. Using the change function, I call a cfc that runs a query and returns a result: right now, as a struct. As odd as this may sound, I need help getting the data out of that struct and into the text box.

Below is what I have for the cfm and the cfc. Any help would be REALLY appreciated.

test.cfm (this is just a simple form)

<cfquery name="getHRSpecialists" datasource="AOO">
    SELECT * FROM [52PrepHRSpecialists]    
</cfquery>

<script src="jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function() {
    $textBox6 = $("#textBox6");
    $("#textBox5").change(function(e) {
        var selected = $(this).val();
        console.log('change:', selected);
        if(selected === '') return;
        $.get("getHRPhone.cfc?method=getPhone", {textBox5:selected}, function(res) {
            $textBox6.html(res);
        });
    });
});
</script>

<cfform>
    <cfselect name="textBox5" id="textBox5" title="Select You Human Resource Specialist's Name" class="headerFields">
       <option value="">Choose a Specialist</option>
       <cfoutput query="getHRSpecialists">
           <option value="#hrSpecName#">#hrSpecName#</option>
       </cfoutput>    
    </cfselect>

    HRS's Phone #: 
    <cfinput id="textBox6" 
           name="textBox6" 
           type="text" 
           title="Your Human Resource Specialist's Phone ##"
           readonly>

</cfform>

getHRPhone.cfc (this is the cfc that gets referenced from the ajax call)

<cfcomponent output="false"> 
    <cffunction name="getPhone" access="remote" output="true" returntype="struct" returnformat="json">
        <cfargument name="textBox5" type="string" required="true" >

        <cfquery name="getPhone" datasource="AOO">
            SELECT hrSpecPhone
            FROM   [52PrepHRSpecialists]
            WHERE  hrSpecName = '#arguments.textBox5#'
        </cfquery>

        <cfset local.obj =  {phone = getPhone.hrSpecPhone} >        

        <cfreturn local.obj>
    </cffunction>
</cfcomponent>

Data (this is the data I get back)

{"PHONE":"123-456-7890"}

All I need is the actual phone number in the input box based on whoever is selected.

You're almost there, just need to get the phone number from the JSON object returned.

replace this:

    $textBox6.html(res);

with this:

    var data = $.parseJSON(res);
    // console.log(data);
    $textBox6.val(data.PHONE);

Here is the complete working code. and you only need to change test.cfm and the getHRPhone.cfc is working as expected.

<cfquery name="getHRSpecialists" datasource="AOO">
    SELECT * FROM [52PrepHRSpecialists]    
</cfquery>


<script src="jquery-2.2.3.min.js"></script>


<script>
$(document).ready(function() {
    $textBox6 = $("#textBox6");
    $("#textBox5").change(function(e) {
        var selected = $(this).val();
        console.log('change:', selected);
        if(selected === '') return;
        $.get("getHRPhone.cfc?method=getPhone", {textBox5:selected}, function(res) {

            var $hr = $.parseJSON(res);
            $textBox6.val($hr.PHONE);
        });
    });
});
</script>

<cfform>
    <cfselect name="textBox5" id="textBox5" title="Select You Human Resource Specialist's Name" class="headerFields">
       <option value="">Choose a Specialist</option>
       <cfoutput query="getHRSpecialists">
           <option value="#hrSpecName#">#hrSpecName#</option>
       </cfoutput>    
    </cfselect>

    HRS's Phone #: 
    <cfinput id="textBox6" 
           name="textBox6" 
           type="text" 
           title="Your Human Resource Specialist's Phone ##"
           readonly>

</cfform>

res.PHONE might be the answer. Care for correct caseing. When Coldfusion serializes the data in a structure it might alter upper/lower caseing. Use the F12 tool of your browser (Firebug maybe also in Mozilla Browser). there's a network tab, you should see the serialized response there.