jquery - ColdFusion 结构和 Ajax

Question

我有一个带有选择框和文本框的简单表单。使用更改函数，我调用一个运行查询并返回结果的 cfc:现在，作为结构体。尽管这听起来很奇怪，但我需要帮助将数据从该结构中取出并放入文本框中。

以下是我对 cfm 和 cfc 的了解。任何帮助将非常感激。

test.cfm(这只是一个简单的表单)

<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(这是从 ajax 调用引用的 cfc)

<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>

数据(这是我得到的数据)

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

我所需要的只是输入框中基于所选人员的实际电话号码。

Answer 1

这是完整的工作代码。您只需要更改 test.cfm，getHRPhone.cfc 就会按预期工作。

<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>