jQueryを使用してAJAXを使用してCFCにJSONを投稿

Question

CFCでJquery/AJAX/JSONを使用して電子メールを送信しようとしています（簡単なのですか？私は近づいていますが、最後の部分にはまっています。私の失敗は明らかです。

エラーが発生しました"サポートされていない操作です。詳細についてはアプリケーションログを確認してください。" ColdFusionから戻ってくると思います。

そのメッセージには、次のURLから来ている生成GETリクエスト：

http://servername/test.cfc?method=sendMail 

：私は基本的なテストメールを送信し、ブラウザで私のCFCを呼び出すことができる午前

http://www.dumbass.com/CFIDE/componentutils/cfcexplorer.cfc?method=getcfcinhtml&name=blah.www.test&path=/blah/www/test.cfc 

CFCへ

フォームポストのようなに沿って送信されています：

method=sendMail&name=BOB&email=bob%40bitchin.com&subject=Message+from+contact+form&message=bob+is+really+bitchin 

はここでjQueryのですここで

$.ajax({ 
    type: "POST", 
    url: "test.cfc?method=sendMail", 
    data: { 
     "name": $("#footer-form #name2").val(), 
     "email": $("#footer-form #email2").val(), 
     "subject": "Message from contact form", 
     "message": $("#footer-form #message2").val() 
    }, 
    dataType: "json", 
    success: function(data) { 
     if (data.sent == "yes") { 
      $("#MessageSent2").removeClass("hidden"); 
      $("#MessageNotSent2").addClass("hidden"); 
      $(".submit-button").removeClass("btn-default").addClass("btn-success").prop('value', 'Message Sent'); 
      $("#footer-form .form-control").each(function() { 
       $(this).prop('value', '').parent().removeClass("has-success").removeClass("has-error"); 
      }); 
     } else { 
      $("#MessageNotSent2").removeClass("hidden"); 
      $("#MessageSent2").addClass("hidden"); 
     } 
    } 
}); 

はCFC、（でも送信されたフォームのフィールドを使用しようとしていない）である：「 ：

<cfcomponent output="false" access="remote"> 
    <cffunction name="sendMail" access="remote" returntype="void"> 
    <cfmail from="do-not-reply@dumbass.com" 
     to="illiquent@gmail.com" subject="duh!!!"> 
     You got mail! 
    </cfmail> 
    </cffunction> 

は

AJAXは失敗メッセージ用に作成されたHTMLを戻すされますサポートされていない操作。詳細についてはアプリケーションログを確認してください」

私は共有CFマシン上にあり、アプリケーションログにアクセスできません。JSONとしてデータを渡していますか？私は悲しみの原因になっていますか？ （）の代わりにフォーム上に？AJAXのjQuery以内

は私がtest.cfc?method=sendMailを持っている。私はAJAX呼び出しの「データ」ブロック内のメソッドを置くべきか？

私はシオマネキがインストールされて持っている、と見ていますなぜなら、JqueryとAJAXを介してCFCにデータを送信するのはなぜか謎のようなものでなければならないからです。

誰かが私をまっすぐにしたり、私に実用的な例を教えてもらえれば、とても感謝しています。

UPDATE

私のjavascriptのを確認した後 - 「詳細については、アプリケーションログを確認してください」引き起こした - 私はまた、フォームによって呼び出されるさまざまな機能が提出していたことがわかりました。ここでは私のために問題を引き起こしていた機能は次のとおりです。ここで

$(document).ready(function() { 
      //this function was getting called in addition to one posted  
      // above. 
      $("input#submit1").click(function(){ 
       console.log('WTF'); 
       console.log($('form#footer-form').serialize()); 
       $.ajax({ 
        type: "POST", 
        // this is where I wasn't specifying the method! 
        // it should have been test.cfc?method=sendMail 
        url: "test.cfc", //process to mail 
        // still thinking about serialize to make this flexible 
        data: $('form#footer-form').serialize(), 
        success: function(msg){ 
         $("#thanks").html(msg) //hide button and show thank you 
         $("#form-content").modal('hide'); //hide popup 
        }, 
        error: function(){ 
         alert("failure"); 
        } 
       }); 
      }); 
     }); 

は「作業」している私の更新CFCです：

<cffunction name="sendMail" access="remote" returnformat="json" returntype="any"> 
    <cfargument name="name" required="true" />  
    <cfargument name="subject" required="true" /> 
    <cfargument name="email" required="true" /> 
    <cfargument name="message" required="true" /> 



     <cfmail from="do-not-reply@dumbass.com" 
     to="me@dumbass.com" subject="#subject#"> 
     Owning it! 
    #name# #subject# #email# #message# 
     </cfmail> 

     <cfset result ='{"sent":"yes"}'> 

    <cfreturn result /> 

    </cffunction> 

私は苦労していた最後のビットが正しくできるようにする方法でありますreturntype = "json"の使い方とその戻り値の作成方法 returntype="json"のときにエラーが発生したので、私はreturntype="any"を持っています。私はreturntype = "json"を使いたいと思います。ただし、これは：

<cfset result ='{"sent":"yes"}'> 
<cfreturn result /> 

がエラーをスローします。私はreturntype = "json"を使うことができるように、同様の構造を作成する正しい方法は何ですか？私は将来CFCからJSONを返すことを望んでおり、手動で文字列を作成する必要はないと思っています。もしそれが意味をなさないならば。

<cfif success> 
    <cfset result ='{"sent":"yes"}'> 
<cfelse> 
    <cfset result ='{"sent":"no"}'> 
</cfif> 

すなわち

は、どのように私は "結果" 私は戻り値の= "JSON" を使用できるようにすることができますか？

Answer 1

test.cfcの代わりにtest.cfmページを使用します。あなたはまた、javascriptを

呼び出しがあなたを

url: "test.cfm?method=sendMail", 

になり、代わりの

if (data.sent == "yes") { 

すべきビットを調整する必要が

<cfswitch expression="#url.method#"> 

<cfcase value="sendMail"> 
    <cfmail from="do-not-reply@dumbass.com" 
     to="illiquent@gmail.com" subject="duh!!!"> 
     You got mail! 
    </cfmail> 

    <cfset result = structNew()> 
    <cfset result['sent'] = true /> 
    <cfoutput>#SerializeJSON(result)#</cfoutput> 

</cfcase> 

</cfswitch> 

：ここではそのためのコードです必要性

if (data.sent) { 

Answer 2

は間違いなくロール自分で自分のしていないJSONを、文字列を手動

はいを​​構築する必要がありますする必要はありません。ただし、returnTypeとreturnFormatを混同しないでください。 returnTypeは、クエリ、構造体、配列など、返すオブジェクトの型です。あなたが考えているのはreturnFormatで、オブジェクトが呼び出し元に返される方法を制御します：json、wddx、plain。

ファンクションシグネチャにreturnFormatを使用することもできますが、私の好みは、シグネチャから任意のフォーマットを省略し、その機能を柔軟に保つことです。最終的に構造体を返すことが必要なので、それを関数の戻り値の型として使用してください（そして、あなたのajax呼び出しの書式を扱います）。

<cffunction name="sendMail" access="remote" returntype="struct"> 

結果構造を作成するときは、キー名に注意してください。残念ながら、CFはデフォルトですべてのキー名を大文字に変換します。つまり、javascript変数はdata.sentの代わりにdata.SENTになります。大文字と小文字を保持するには、代わりに連想配列表記を使用します。 （例では、ブール値、つまり文字列ではなく真/偽を返します）。

<!--- Default behavior upper cases key names, ie {"SENT": true} ---> 
<cfset resultStruct = {sent = true} > 

<!--- Preserves key name case, ie {"sent": true} ---> 
<cfset resultStruct["sent"] = true > 

は、その後、あなたがJSONとして結果を返すようにしたい場合は、単にあなたのAJAX呼び出し中にURLパラメータとして「たreturnformat = JSON」を追加します。そのパラメータが自動的にJSON文字列に（つまり、構造体オブジェクト）の結果を変換するために、CFを指示します。

url: "test.cfc?method=sendMail&returnFormat=JSON", 

最後に、あなたの成功の機能では、そのようにブール値を使用します。

success: function(data) { 
    if (data.sent) { 
     console.log("success"); 
    } 
    else { 
     console.log("failure. do something else."); 
    } 
}