Question

我通过AJAX将表单发布到ColdFusion操作页面进行处理。但由于某些原因，我的处理页面没有看到任何表格值。

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

Answer 1

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

无法通过AJAX帖子访问表单值

1 个答案: