Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@namitan

ColdFusionでAjax

CFAJAXIMPORTタグを使う方法と、CFAJAXPROXYタグを使う方法のサンプルを作りました。
最低限の処理しかないので詳しくはCFのリファレンスを見てください。

まずはCFAJAXIMPORTタグを使う方法から。

ajax_test1.cfm
<CFPROCESSINGDIRECTIVE pageencoding="utf-8" />
<CFSETTING enablecfoutputonly="true" showdebugoutput="false">

<!--- アクション --->
<CFIF cgi.request_method eq "POST">
    <CFOUTPUT>#form.txtInput#さん、こんにちは。</CFOUTPUT>
    <CFABORT>
</CFIF>

<!--- 画面出力 --->
<CFOUTPUT>
<CFAJAXIMPORT>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Ajaxサンプルその1</title>
</head>
<body>
    <h3>Ajaxサンプルその1</h3>
    <form name="frmSample">
        <input type="text" name="txtInput" value="" placeholder="お名前を入力してください">
        <input type="button" name="btnSubmit" value="送信" onclick="ajaxSubmit()">
    </form>
    <p><span id="spanOutput"></span></p>
</body>
</html>
<script>
    function ajaxSubmit(){
        ColdFusion.Ajax.submitForm(
            'frmSample',
            'ajax_test1.cfm',
            function(result){
                spanOutput.innerHTML = result;
            },
            function(statusCode, statusMsg){
                alert('[エラー]\n' + statusCode + ': ' + statusMsg);
            }
        );
    }
</script>
</CFOUTPUT>

次に、CFAJAXPROXYタグを使う方法。こちらはファイルが2つに分かれます。

ajax_test2.cfm
<CFPROCESSINGDIRECTIVE pageencoding="utf-8" />
<CFSETTING enablecfoutputonly="true" showdebugoutput="false">

<!--- 画面出力 --->
<CFOUTPUT>
<CFAJAXPROXY cfc="ajax_test2" jsclassname="ajaxCFC">
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Ajaxサンプルその2</title>
</head>
<body>
    <h3>Ajaxサンプルその2</h3>
    <form name="frmSample">
        <input type="text" name="txtInput" value="" placeholder="お名前を入力してください">
        <input type="button" name="btnSubmit" value="送信" onclick="ajaxSubmit()">
    </form>
    <p><span id="spanOutput"></span></p>
</body>
</html>
<script>
    function ajaxSubmit(){
        var input_value = document.frmSample.txtInput.value;
        var o = new ajaxCFC();
        o.setCallbackHandler(function(result){
            spanOutput.innerHTML = result;
        });
        o.setErrorHandler(function(statusCode, statusMsg){
            alert('[エラー]\n' + statusCode + ': ' + statusMsg);
        });
        o.greeting(input_value);
    }
</script>
</CFOUTPUT>
ajax_test2.cfc
<CFCOMPONENT>
<CFPROCESSINGDIRECTIVE pageencoding="utf-8" />

<CFFUNCTION name="greeting" access="remote" returntype="string">
    <CFARGUMENT name="name" required="yes" type="string">
    <CFRETURN "#name#さんこんにちは。">
</CFFUNCTION>

</CFCOMPONENT>

前者は1つのファイルで済みますが、必ず送信用のフォームが必要になります。後者はJavaScriptの関数として呼び出せるのでフォームは不要ですが、CFCコンポーネントが必要になります。

上記のサンプルでは「○○さん、こんにちは。」という文字列を返していますが、もちろんjsonも返せます。後者のCFAJAXPROXYタグを使う方法では、CFの構造体をreturnすると、受け取った側はそのままJavaScriptのオブジェクトとして扱えます。

ajax_test3.cfm
<CFPROCESSINGDIRECTIVE pageencoding="utf-8" />
<CFSETTING enablecfoutputonly="true" showdebugoutput="false">

<!--- 画面出力 --->
<CFOUTPUT>
<CFAJAXPROXY cfc="ajax_test3" jsclassname="ajaxCFC">
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Ajaxサンプルその3</title>
</head>
<body>
    <h3>Ajaxサンプルその3</h3>
    <form name="frmSample">
        <input type="text" name="txtInput" value="" placeholder="お名前を入力してください">
        <input type="button" name="btnSubmit" value="送信" onclick="ajaxSubmit()">
    </form>
    <p><span id="spanOutput"></span></p>
</body>
</html>
<script>
    function ajaxSubmit(){
        var input_value = document.frmSample.txtInput.value;
        var o = new ajaxCFC();
        o.setCallbackHandler(function(result){
            spanOutput.innerHTML = result.GREETING; // CFにより大文字に変換されてしまうので注意
        });
        o.setErrorHandler(function(statusCode, statusMsg){
            alert('[エラー]\n' + statusCode + ': ' + statusMsg);
        });
        o.greeting(input_value);
    }
</script>
</CFOUTPUT>
ajax_test3.cfc
<CFCOMPONENT>
<CFPROCESSINGDIRECTIVE pageencoding="utf-8" />

<CFFUNCTION name="greeting" access="remote" returntype="struct">
    <CFARGUMENT name="name" required="yes" type="string">
    <CFSET stTemp = structNew()>
    <CFSET stTemp.name = name>
    <CFSET stTemp.greeting = "#name#さん、こんにちは。">
    <CFRETURN stTemp>
</CFFUNCTION>

</CFCOMPONENT>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?