jQuery 提交在 url 中加载表单数据，但不会发布到 ColdFusion cfc

Question

我正在尝试将表单数据传递到 ColdFusion 组件中。我使用 ajax get 请求加载表单，然后填写表单，然后单击提交按钮将表单数据传递到 cfc。问题是 ajax post 第一次抛出错误，但表单数据已加载到 URL 中。当我再次点击提交时，它工作正常。如果我在第一次提交后更改表单数据，则会收到相同的错误。这是怎么回事？

这是提交函数:

$(document).on('submit', 'form#update',function() {
    $linkName = $('#update').find('#linkName').val();
    $linkURL = $('#update').find('#linkURL').val();
    $linkInfo = $('#update').find('#linkDesc').val();
    $numOfLinks = $('.linkSection').length;
    if ($numOfLinks > 0){
    // Here the sub link names and urls put into an array
        $subLinkName = [];
        $subLinkURL = [];   
        $('.linkSection').each(function(index, element) {
        $subLinkName.push($(this).find('#subLinkName').attr('value'));
            $subLinkURL.push($(this).find('#subLinkURL').attr('value'));
            $data = {linkName: $linkName, linkURL: $linkURL, linkID : $linkID, linkDescription : $linkInfo, subLinkNames : $subLinkName, subLinkURLs : $subLinkURL}; 
        });
        // Optionally, you could put the name and url in the array object here but not sure which is better to do   
        //$subLink =[]; 
        //$('.linkSection').each(function(index, element) {
        //$subLink.push($(this).find('#subLinkName').attr('value'));
        //$subLink.push($(this).find('#subLinkURL').attr('value'));
        //});   
    }else{
        //alert('hey');
        $data = {linkName: $linkName, linkURL: $linkURL,  linkID : $linkID, linkDescription : $linkInfo};
    }
    //Uncomment to check the data being sent
    //alert(JSON.stringify($data));
    $.ajax({
        type: "POST",
        url: "/webapps/WebServices/RMSI/rmsi.cfc?method=UpdateRegularLink",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify($data),
        //dataType: "json",
        beforeSend: function() {                    
            $('#response').css({margin:'20px', padding: '20px', backgroundColor:'#f5f5f5'}).append('<h2>Server Response:</h2><br />');;
        },
        error: function(data,status,error){
            alert(data+': '+status+': '+error);
        }
    }).done(function(apiResponse) {
        $( "#response" ).append( apiResponse );
    });
});

CFC 组件:

<cfcomponent>
  <cffunction name="UpdateRegularLink" access="remote" returntype="any">    

    <!--- ***********************************************************************************
    ' 10/03/2013 - Kudos to E. Grosskurth for figuring this out.  When passing arrays of 
    ' Json data we don't need defined parameters.  The getHttpRequestData().content function 
    ' pulls all of the FORM.variables without having to use arguments.  The 
    ' deserializeJSON function turns our comma delimited lists into CF arrays.  -TE
    ' ********************************************************************************** --->
    <cfset params = toString( getHttpRequestData().content ) />

    <!--- deserialize the request data, so that we can access the individual arguments --->
    <cfset args = #deserializeJSON(params)# />

    <!--- set a base path to wherever our application lies --->
    <cfset bPath = "e:\webapps\NRCNewsApps\rmsi" />
    5
    <!--- Pull back, and parse, our existing xml file --->
    <cffile action="read" file="#bPath#\xml\nav.xml" variable="myxml">  
    <cfset thedoc = XmlParse(myxml)>
    6   
    <!--- Search for the specific node we need to modify.  This is our top level info. --->
    <cfset arynode = XmlSearch(thedoc, "/webpages/course[ @id = '#args.linkID#' ]") />
    <cfset xmlCourse = arynode[1] />    
    7
    <!--- Update the top level information about the link --->
    <cfset arynode[1].linkName.xmlText = "#args.linkName#" />
    <cfset arynode[1].link.xmlText = "#args.linkURL#" />
    <cfset arynode[1].linkInfo.xmlText = "#args.linkDescription#" />
    8
    <!--- Find out if there are sublinks --->
    <cfif structKeyExists(xmlCourse, "subLink")>
        <cfset slNode = XMLSearch(xmlCourse, "subLink") />
        <cfloop from = "1" to="#arrayLen(slNode)#" index="i">
        <!---<cfoutput>#i#</cfoutput>--->
            <cfset slNode[i].name.xmlText = "#args.subLinkNames[i]#" />
        </cfloop>
    </cfif>
    9


    <cfdump var="#thedoc#" />
    <cfabort />


  </cffunction>
</cfcomponent>

Answer 1

试试这个:

$('body').on('click', '#update submit', function(event) {
    event.preventDefault();
    var form = $(this).closest('form'),
        data = form.serialize(),
        action = form.attr('action');
    $.post(action, data)
        .done(function() {
            alert('Success!');
        })
        .fail(function() {
            alert('Sorry, please try again.');
        });
});

显然，您的表单需要有一个操作属性。