使用Ajax和ColdFusion無法查詢數據庫

Question

我在使用ColdFusion，Ajax和表單的組合顯示查詢結果時遇到問題。我希望代碼能夠在用戶輸入數字時查詢數據庫，然後顯示用戶輸入時最接近的數字。最終我想顯示與數字相關的描述以及...這就是爲什麼這部分查詢在那裏。

現在我的Ajax似乎正在工作，但我沒有顯示任何查詢結果。我知道我忽略了一些東西。誰能幫忙？

查詢

<cfset itemNumber = 'form.useitem'> 
<cfquery name="item_results" datasource="inv_usage" username="#session.db_user#" password="#session.db_pass#"> 
select item_number, item_desc 
from item_desc_list 
where item_number = '#itemNumber#' 
order by convert_to(item_number,'SQL_ASCII') 
</cfquery> 

<script type="text/javascript"> 
$('#results').html('<p>' + <cfoutput query="item_results">#item_results.item_number#</cfoutput> + '</p>'); 
</script> 

形式

<form id="usage" name="usage" method="post" action="item_usage2.cfm"> 
    <div class="bodyTextBold"><br><br> 
     Search for Item Number: 
     <input name="useitem" title="Search" value="Search" onfocus="(this.value == 'Search') && (this.value = '')" onblur="(this.value == '') && (this.value = 'Search')"> 
     <div id='results'></div> 
     <div id='ajaxWorking'></div> 
     <p>Include INVAs? <input type="checkbox" name="invas" /></p> 
     <input type="submit" name="action" class="inputSubmitr" value="Submit"> 
     <input type="submit" name="action" class="inputSubmitL" value="Cancel"> 
    </div> 
    <br /> 
    <p><a href="./index.cfm">Usage Menu</a></p> 
    <p><a href="/RepCorner/index.cfm">Main Menu</a></p> 
</form> 

阿賈克斯

<script> 

    $('#usage').keyup(function(event) { 

    var url = $(this).attr('action'); 
    var formData = $(this).serialize(); 

    $.ajax(url, { 
     data: formData, 
     type: "POST", 
     success : function(response){ 
      $('#ajaxWorking').html('<p>Working!</p>'); 
     } 
    }).fail(function(jqHXR){ 
     $('#results').html('<p>Sorry! Something\'s wrong...<br /> Error: ' + jqHXR.statusText + '<br />Please contact IT.</p>'); 
    }); 
    }); 

</script> 

Answer 1

您的ColdFusion頁應該返回HTML（或任何數據你想要的）。

<!--- Always use <cfqueryparam> for parameters in your SQL. No exceptions. ---> 
<cfquery name="item_results" datasource="inv_usage" username="#session.db_user#" password="#session.db_pass#"> 
    select item_number, item_desc 
    from item_desc_list 
    where item_number = <cfqueryparam value="#form.useitem#" cfsqltype="CF_SQL_VARCHAR"> 
    order by convert_to(item_number,'SQL_ASCII') 
</cfquery> 

<!--- build your return HTML here ---> 
<p> 
    <cfoutput query="item_results">#item_results.item_number#</cfoutput> 
</p> 

您的HTML不應該包含inline JS。在這種情況下，「佔位符」功能甚至內置於HTML中。

<form id="usage" name="usage" method="post" action="item_usage2.cfm"> 
    <div class="bodyTextBold"><br><br> 
     <label for="useitem">Search for Item Number:</label> 
     <input name="useitem" id="useitem" title="Search" value="Search" placeholder="Search..."> 
     <div id='results'></div> 
     <div id='ajaxWorking'></div> 
     <p>Include INVAs? <input type="checkbox" name="invas" /></p> 
     <input type="submit" name="action" class="inputSubmitr" value="Submit"> 
     <input type="submit" name="action" class="inputSubmitL" value="Cancel"> 
    </div> 
    <br /> 
    <p><a href="./index.cfm">Usage Menu</a></p> 
    <p><a href="/RepCorner/index.cfm">Main Menu</a></p> 
</form> 

您的JS應該修改Ajax響應中的HTML，在這種情況下，無論CF返回了什麼。

$('#usage').keyup(function (event) { 
    $.post(url, $(this).serialize()) 
     .done(function (response) { 
      $('#results').html(response); 
      $('#ajaxWorking').html('<p>Working!</p>'); 
     }) 
     .fail(function (jqHXR, status, error){ 
      $('#results').html("<p>Sorry! Something's wrong...<br /> Error: " + status + "<br />Please contact IT.</p>"); 
     }); 
});