sử dụng jQuery AJAX để đăng JSON lên CFC

Question

Tôi đang cố gắng sử dụng Jquery/AJAX/JSON với CFC để gửi email (dễ dàng?) Sau khi dành nhiều giờ cố gắng tìm một ví dụ hoàn chỉnh về cách thức hoạt động này , Tôi đang đến gần nhưng bị kẹt ở phần cuối. Thất bại của tôi là điều hiển nhiên.

Tôi gặp lỗi "Thao tác không được hỗ trợ. Kiểm tra nhật ký ứng dụng để biết thêm chi tiết". quay lại từ (tôi nghĩ) ColdFusion.

Các yêu cầu GET mà tạo ra thông điệp rằng đến từ URL sau:

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

tôi có thể gọi CFC của tôi trong một trình duyệt, mà không gửi một email thử nghiệm cơ bản:

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

Bài đăng biểu mẫu cho CFC đang được gửi đi như vậy:

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

Đây là 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"); 
     } 
    } 
}); 

Đây là CFC, (thậm chí không cố gắng sử dụng các trường mẫu đã gửi):

<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 được đưa trở lại HTML được tạo ra cho thông điệp thất bại: " Thao tác không được hỗ trợ. Kiểm tra nhật ký ứng dụng để biết thêm chi tiết. ".

Tôi đang ở trên một máy CF được chia sẻ và không có quyền truy cập vào nhật ký ứng dụng. Có phải nó chuyển dữ liệu như JSON gây đau buồn cho tôi không?() trên các hình thức thay thế?

trong AJAX jquery tôi có test.cfc?method=sendMail. tôi có nên đặt phương pháp trong khối 'dữ liệu' của AJAX gọi?

tôi đã có cáy được cài đặt, và đang xem xét các tiêu đề, nhưng tôi vẫn không hiểu tại sao việc gửi dữ liệu tới CFC qua Jquery và AJAX phải là một điều bí ẩn quá.

Nếu bất cứ ai có thể làm thẳng tôi hoặc chỉ cho tôi một ví dụ làm việc, tôi sẽ rất cảm kích.

CẬP NHẬT

Sau khi xem xét javascript của tôi - tôi thấy rằng tôi đã có một chức năng khác nhau cũng được gọi bằng hình thức nộp - nhưng lại gây "Kiểm tra log ứng dụng để biết thêm chi tiết". Đây là chức năng mà đã gây ra vấn đề đối với tôi:

$(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"); 
        } 
       }); 
      }); 
     }); 

Đây là CFC cập nhật của tôi mà là "làm việc":

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

Bit cuối cùng tôi đang phải vật lộn với là làm thế nào để cho phép đúng cách việc sử dụng returntype = "json" và cách tạo giá trị trả về cho điều đó xảy ra. Tôi có returntype="any" vì tôi gặp lỗi khi tôi có returntype="json". Tôi muốn sử dụng returntype = "json".Tuy nhiên, điều này:

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

ném lỗi. Cách chính xác để tạo ra một cấu trúc tương tự để tôi có thể sử dụng returntype = "json" là gì? Tôi chắc chắn trong tương lai tôi sẽ muốn trả lại JSON từ CFC và không muốn phải xây dựng các chuỗi bằng tay ... nếu điều đó có ý nghĩa gì.

tức

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

Làm thế nào tôi có thể làm cho "kết quả" như vậy mà tôi có thể sử dụng returntype = "json"?

Answer 1

Thay vì test.cfc sử dụng trang test.cfm. Đây là mã cho nó:

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

bạn cũng cần phải điều chỉnh một chút javascript

cuộc gọi nên để

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

và thay vì

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

bạn cần

if (data.sent) { 

Answer 2

không muốn phải xây dựng các dây bằng tay

Vâng, chắc chắn không cuộn-của riêng bạn JSON. Tuy nhiên, đừng nhầm lẫn returnType và returnFormat. returnType là loại đối tượng cần trả về, chẳng hạn như truy vấn, cấu trúc, mảng, v.v. Những gì bạn đang nghĩ đến là returnFormat, điều khiển cách đối tượng được trả về cho người gọi: json, wddx hoặc plain.

Trong khi bạn cũng có thể sử dụng returnFormat trong chữ ký hàm, tuỳ chọn của tôi là bỏ qua mọi định dạng khỏi chữ ký và giữ cho chức năng linh hoạt. Vì cuối cùng bạn muốn trả về một cấu trúc, hãy sử dụng nó làm kiểu trả về hàm (và xử lý định dạng trong cuộc gọi ajax của bạn).

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

Chỉ cần cẩn thận với tên khóa khi tạo cấu trúc kết quả. Thật không may, CF chuyển đổi tất cả các tên khóa thành chữ hoa theo mặc định. Điều đó có nghĩa là biến javascript sẽ là data.SENT, thay vì data.sent. Để bảo vệ trường hợp, thay vào đó hãy sử dụng ký pháp mảng kết hợp. (Lưu ý, ví dụ trả về một giá trị boolean tức là true/false chứ không phải là một chuỗi);

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

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

Sau đó, nếu bạn muốn trả về kết quả dưới dạng JSON, chỉ cần nối thêm "returnFormat = JSON" làm thông số url trong cuộc gọi ajax của bạn. tham số chỉ thị CF tự động chuyển đổi kết quả (tức là đối tượng struct) thành một chuỗi JSON:

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

Cuối cùng, trong chức năng thành công của bạn, sử dụng giá trị boolean như vậy:

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