無法通過AJAX訪問表單值

我通過AJAX將表單發佈到ColdFusion操作頁面進行處理。但由於某種原因，我的處理頁面沒有看到我的任何表單值。無法通過AJAX訪問表單值

<cfoutput> 

<!--- Javascript that updates the notes in the DB ---> 
<script> 
$(document).ready(function() { 
     $('##notesForm').submit(function(event){ 
      event.preventDefault(); 
      ajaxAddNotes(); 
     }); 

function ajaxAddNotes() { 
      console.log("ajaxAddNotes function called"); 
      $.ajax({ 
       type: "POST", 
       data: $('##notesForm').serialize(), 
       url: "../actionpages/add_notes.cfm", 
       cache: false, 
       contentType: false, 
       processData: false, 
       beforeSend: function(){ 
        $('.loader').show(); 
       }, 
       complete: function(){ 
        $('.loader').hide(3000); 
       }, 
       success: function(data) { 
        console.log("File successfully sent."); 

        $("##addFileResponse").append("Note successfully added."); 
        PopulateNotesDIV(); 
        }, 
       error: function(data) { 
        console.log(data); 
       } 
      }); 
     } 
    }); 

</script> 

    <form name="notesForm" id="notesForm"> 
    <textarea class='expanding' tabindex="18" name="tech_notes" id="tech_notes" cols="100" rows="5" >#get_ticket.tech_notes#</textarea><br /> 

      <input tabindex="0" type="submit" name="update-notes" id="update-notes" value="Update Notes" /> 
      <input type="hidden" value="#url.ticketID#" name="ticket_id" id="ticket_id"> 

      <div class="loader"><img class="loading-image" src="../images/loading.gif" /></div> 
      <div class="response" id="addFileResponse"></div> 

    </form> 
</cfoutput>

這是我處理網頁上的代碼（我知道我還沒有cfqueryparam'd此查詢恰在此時測試。）：

<cfdump var="#form#"> 

<!---Update Notes button was clicked so we now must update the notes section ---> 
<cfquery name="update_notes" datasource="#datasource#"> 
update closed_tickets 
set tech_notes = '#form.tech_notes#' 
where ticket_id = #form.ticket_id# 
</cfquery>

來源

2014-11-13 Brian Fleishman

' PeterKA

它任務說：結構[空] –

和'POST'請求發送什麼參數/值，如果有的話？ – PeterKA

設置contentType: false阻止提交被確認爲表單POST。刪除該設置，它會起作用。正如John Whish在評論中所解釋的那樣：

..默認情況下contentType是'application/x-www-form-urlencoded; charset = UTF-8'，所以你重寫了這個值。這裏更多的信息： api.jquery.com/jquery.ajax

更新：

一個簡單的測試腳本爲我工作得很好。測試操作頁面將FORM範圍值作爲JSON字符串返回。結果表明所有提交的字段：

結果：

{ "TECH_NOTES":"this is a test note" 
    , "FIELDNAMES":"TECH_NOTES,TICKET_ID" 
    , "TICKET_ID":123 
}

action.cfm

<cfoutput>#serializeJSON(form)#</cfoutput>

testForm.cfm

<!DOCTYPE html> 
<html> 
<head> 
    <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
<!--- Javascript that updates the notes in the DB ---> 
<script> 
$(document).ready(function() { 
     $('#notesForm').submit(function(event){ 
      event.preventDefault(); 
      ajaxAddNotes(); 
     }); 

    function ajaxAddNotes() { 
      console.log("ajaxAddNotes function called"); 
      $.ajax({ 
       type: "POST", 
       data: $('#notesForm').serialize(), 
       url: "action.cfm", 
       cache: false, 
       //contentType: false, 
       processData: false, 
       beforeSend: function(){ 
        $('.loader').show(); 
       }, 
       complete: function(){ 
        $('.loader').hide(3000); 
       }, 
       success: function(data) { 
        $("#addFileResponse").append(data.toString()); 
        // not sure what this method does. comment out for now 
        //PopulateNotesDIV(); 
        }, 
       error: function(data) { 
        console.log(data); 
       } 
      }); 
     } 
    }); 
</script> 
</head> 

<body> 
    <!--- set sample value ---> 
    <cfset get_ticket.tech_notes = "this is a test note"> 
    <cfset url.ticketID = "123"> 

    <form name="notesForm" id="notesForm"> 
    <!--- only need to place around CF variables ---> 
    <cfoutput> 
    <textarea class='expanding' tabindex="18" name="tech_notes" id="tech_notes" cols="100" rows="5" >#get_ticket.tech_notes#</textarea><br /> 
    <input tabindex="0" type="submit" name="update-notes" id="update-notes" value="Update Notes" /> 
    <input type="hidden" value="#url.ticketID#" name="ticket_id" id="ticket_id"> 
    </cfoutput> 
    <div class="loader"><img class="loading-image" src="../images/loading.gif" /></div> 
    <div class="response" id="addFileResponse"></div> 
    </form> 
</body> 
</html>

來源

2014-11-14 07:17:57 Leigh

只需添加到答案;默認情況下contentType是'application/x-www-form-urlencoded; charset = UTF-8'，所以你重寫了這個值。更多信息：http://api.jquery.com/jquery.ajax/ –

刪除contentType：false和processDate：false不起作用。 –

適合我。也許你的目標有所不同。你可以嘗試上面的測試代碼嗎？ – Leigh

無法通過AJAX訪問表單值

回答

相關問題