使用 Ajax 和 ColdFusion 查询数据库时遇到问题答案

【问题标题】：Trouble Querying a Database using Ajax and ColdFusion使用 Ajax 和 ColdFusion 查询数据库时遇到问题
【发布时间】：2016-10-06 16:45:58
【问题描述】：

我在使用 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>

【问题讨论】：

您在数据库中搜索字符串 form.useitem 而不是变量。这是故意的吗？也可以使用cfqueryparam
一次做一件事。首先确保您的查询在不使用 ColdFusion 运行时返回结果。

标签： jquery ajax coldfusion

【解决方案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 不应包含内联 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>");
        });
});

【讨论】：