Help us understand the problem. What is going on with this article?

ColdFusionでAjax

More than 1 year has passed since last update.

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>
namitan
ColdFusionでごはん食べてます。
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした