How to display return value of ColdFusion function using jQuery or AJAX

I am using ColdFusion function shown below:

<cffunction name="getdata" access="remote" output="true" returntype="string">
    <cfargument name="x" type="string" required="true">
    <cfargument name="y" type="string" required="true">
    <cfquery name="getval" datasource="#application.datasource#" result="result">
    select val from table where col1=#arguments.x# and col2=#arguments.y#
    </cfquery>

    <cfset p= #getval.val#>
    <cfreturn p>
</cffunction>

I want the value of val to be printed in an alert. Alert displayed should be "please verify whether it's val" when user selects one of the values in autocomplete drop down.

How can I achieve this?

I tried using jQuery AJAX inside select event in autocomplete, here x and y are the names of input fields on the form:

 select: function(event, ui) {
     $.ajax({
            type: "GET",
            url: 'somepathtofunction?method=getdata&x='+ x + '&y'+ y,
            async: true,
            success: function(result) {
                alert('please verify whether it is' + result.val  );
            }
     });
}             

Also, tried the code below:

alert('please verify whether it is'  +  $.get('somepathtofunction?method=getdata&x='+ x + '&y'+ y));

but none of these worked.

I am new to jQuery AJAX and ColdFusion so I know I have written most of the wrong code. Kindly correct me wherever I am wrong.

You're on the right path with the AJAX call. There are a multitude of ways to pull this off. I have found one of the simplest ways to have both CF and JS use JSON notation. Your CF function should be set to output=true and use the #serializeJSON()# function to return the data.

One 'gotcha' to note is CF always coapitalizes JSON data by default so you have to use the ALL CAPS version of your return variables in the case-sensitive JS code.

Here's something to try:

<cffunction name="getdata" access="remote" output="true">
    <cfargument name="x" type="string" required="true">
    <cfargument name="y" type="string" required="true">
    <cfquery name="getval" datasource="#application.datasource#" result="result">
    select val from table where col1=#arguments.x# and col2=#arguments.y#
    </cfquery>
    <cfoutput>#serializeJSON({val=getval.val})#</cfoutput>
</cffunction>




  $.ajax({
        method: "GET",
        url: "yourCFCpathhere.cfc",
        data:{
            method: "getdata",
            x: var1,
            y: var2
        },
        dataType: "json"
    }).done(function( result ) {
        alert('please verify whether it is' + result.VAL  ); //CAPS for the return var from CF
    });
});