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>

的Ajax

<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不应包含内联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>");
        });
});

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

1 个答案: