Coldfusion Ajax - 表单提交答案

【问题标题】：Coldfusion Ajax - Form SubmissionColdfusion Ajax - 表单提交
【发布时间】：2010-06-21 05:31:54
【问题描述】：

我需要 ColdFusion 的帮助，我想使用 CF9 ajax 库，我的标题中有 <cfajaximport tags="cfform">，并包含一个使用 <cfdiv bind="url:domainchecker.cfm"> 的表单，但是这用“加载”ajax 轮替换了整个表单然后显示结果。

我需要的是提交表单，但单独的结果区域是更新的（并且显然会有 ajax“加载”）。我不希望整个区域都发生变化（这有意义吗？？）

【问题讨论】：

标签： jquery ajax coldfusion cfform

【解决方案1】：

所以，经过深思熟虑，我做到了：

<head>
...
<cfajaximport />
...
    <script>
        function handleResponse(s) {
            if(s == "AVAILABLE") {
                //rewrite span
                var domainspan = document.getElementById('DomainStatus');
                var newcontent = "Available To Register :)";
                domainspan.innerHTML = newcontent;
                var loadingspan = document.getElementById('frmGO');
                var newcontent = "<input name='' value='GO!' class='search_domain_go' type='submit' />";
                loadingspan.innerHTML = newcontent;
            } else {
                //rewrite span
                var domainspan = document.getElementById('DomainStatus');
                var newcontent = "Unavailable To Register :(";
                domainspan.innerHTML = newcontent;
                var loadingspan = document.getElementById('frmGO');
                var newcontent = "<input name='' value='GO!' class='search_domain_go' type='submit' />";
                loadingspan.innerHTML = newcontent;
            }
        }

        function CheckDomain() {
            var loadingspan = document.getElementById('frmGO');
            var newcontent = "<input name='' type='image' class='search_domain_go' src='images/ajax-loader.gif' alt='' />";
            loadingspan.innerHTML = newcontent;
            ColdFusion.Ajax.submitForm('frmDomainCheck','checkdomain.cfm',handleResponse);
        }
    </script>
...
</head>

<body>
...
        <div class="search_domain">
            <div class="search_domain_form">
            Search Your Domain Here<br />
                <form method="post" action="" onSubmit="CheckDomain();return false;" id="frmDomainCheck">
                    <input class="search_domain" name="frmURL" id="frmURL" value="Please enter your domain name here..." onfocus="if(this.value == 'Please enter your domain name here...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Please enter your domain name here...';}" type="text" />
                    <span id="frmGO"><input name="" value="GO!" class="search_domain_go" type="submit" /></span>
                <form>
            </div><!-- /# end search form -->
            <div class="domain_features">
                <ul>
                    <li><span id="DomainStatus">Type in the domain and click 'GO' to check its availability.</span></li>
                </ul>
            </div>
        </div>
...
</body>

【讨论】：

【解决方案2】：

我个人会使用 jQuery 而不是 CF Ajax 函数来完成简单绑定之外的其他事情，而无需太多额外的 JavaScript。

CF 的provided JavaScript functions 太有限了。

由于您已经使用过 jQuery，这应该很容易。看看jQuery的Ajax + Manipulation函数。

【讨论】：

您好亨利，感谢您的快速回复。我从来没有真正在coldfusion中使用过ajax（从来不需要）所以你能给我举个例子吗？或者只是指向一个好的方向。给我一个例子，说明你对 jQuery 的意思（我在网站上使用 jQuery）提前非常感谢

【解决方案3】：

保持简单？

domainSearch.cfm

<head>
</head>

<body>
<h2 style="color:Blue">Domain search</h2>
<form name="domainSearch">
www.<input class="search_domain" name="searchString" id="frmURL" value="Please enter your domain" onfocus="if(this.value == 'Please enter your domain') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Please enter your domain';}" type="text" />.com
<font color="#FF0000"><strong>[Search]</strong></font>
</form>
<p>Enter any domain.com, (hint: try "free")</p>
<cfdiv id="resultsDiv" bind="url:searchProcessor.cfm?searchString={searchString}">
</body>
</html>

searchProcessor.cfm

<cfif IsDefined("URL.searchString")>

    <cfif URL.searchString eq "Please enter your domain">
        <cfoutput></cfoutput>   
    <cfelseif URL.searchString eq "free">
        <cfoutput>Great, #URL.searchString# is available, price $400</cfoutput>
    <cfelse>    
        <cfoutput>Sorry, #URL.searchString# is not available, try again.</cfoutput>
    </cfif>
</cfif>

【讨论】：