javascript - 如何在 ColdFusion 中将表单值传递到填充查询参数而不刷新

Question

我正在寻找正确方向的插入!

我有一个 ColdFusion 页面，其表单使用 javascript 动态填充 3 个下拉选项(调用 .js 页面中的函数，该函数又使用 Ajax 调用另一个指向存储过程的 .cfm 页面..然后最终将结果返回到我的原始页面，并填充下一个选择框 - 这使得页面不必在选择之间刷新，唷!)。

在进行之前的 3 个下拉选择后，用户还需要填写 2 个文本框。根据此用户输入，我需要:

1) 调用基于文本和选择输入搜索数据库的查询，无需刷新页面(需要保留数据) 2)将结果输出到表格中，供用户选择匹配，无需刷新(优选) 3) 提交表单并将该值从表传递到处理请求的下一页

我有一个解决方案，它使用所有 CF 代码来处理此页面，但页面必须在每次下拉选择后刷新，以便用值填充下一个下拉列表。这可行，但相当困惑，而且看起来不太整洁。

您对如何使用上述 Javascript 方法完成此任务有什么建议吗？我正在使用遗留代码，因此我在重新设计整个结构方面的选择受到限制，并且我希望保留尽可能多的现有功能。

调用页面的下拉列表结构和ajax示例:

在 CFM 主页面中:

<tr>
    <td>Region :</td>
    <td>
        <select id="subregions" onchange="fillupRegion()">
         <option></option>
          <cfoutput>#regionstr#</cfoutput>
         </select>
      </td>
 </tr>
 <tr>
     <td>Sub Turf :</td>
      <td>
          <select id="region" name="region" onchange="fillupCLLI('','region','clli',true)"></select></td>
 </tr>
 <tr>
     <td>Street Address :</td>
     <td>
         <input type="text" maxlength="50" size="40" name="txtStreet" id="txtStreet"/>
   </td>
 </tr>

在 .JS 页面中

function fillupRegion(){
       // fill up the sub region drop down according to the selected region
       $.ajax({
        type: "POST",      
        dataType: "text",
        url: "lookup_subregions.cfm",      
        data: "region="+ $("#subregions").val(),
        timeout : 30000,
        success: function(response){
            if (response=="<option value=''></option>"){
                $("#region").attr("disabled",true);
            }else{
                $("#region").attr("disabled",false);
            }
            $("#state option[value='']").attr("selected","selected");                      
            $("#region").html(response);                       
        },
        error: function(){
            alert("An error has occurred.");
        }
  });
}

必须根据选择填充主查询(忽略#arguments#标签)

<cfset p=#ARGUMENTS.streetAdd#.split(" ")>
<cfquery name="getPossibleMatchQry"datasource="#request.application.dba#"
          username="#request.application.dbaid#"
          password="#request.application.dbapwd#">
          SELECT top 25 CLLI_CODE, CLLI_CODE_COMBINED_ADDRESS as STREETADDRESS, CITY_PLACE_NAME as CITY, STATE
   FROM CSMI_REF_CLLI_LAT_LONG
    WHERE (UPPER(CLLI_CODE_COMBINED_ADDRESS) LIKE UPPER('#p[1]#' + '%')
    <cfif gStreet EQ True>
     AND UPPER(CLLI_CODE_COMBINED_ADDRESS) LIKE UPPER('% ' + '#p[2]#' +'%'))
     <cfelse> )
    </cfif>

    AND (UPPER(CITY_PLACE_NAME) LIKE UPPER('#ARGUMENTS.city#' + '%') OR UPPER(CITY_PLACE_NAME) LIKE UPPER('%' + '#ARGUMENTS.city#' +'%'))
    AND STATE = '#ARGUMENTS.state#'
   ORDER BY CLLI_CODE_COMBINED_ADDRESS ASC
 </cfquery>

解决方案后编辑:

我决定采用 CFC 方法，在我的 .JS 页面中创建一个新函数。当用户完成街道和城市输入字段时调用该函数。我还没有弄清楚的是如何格式化我的函数，以及如何让该函数/查询(来自 cfc)返回一个填充有结果的表(或 cfgrid？)。这是到目前为止我的函数中的内容(到目前为止的查询与上面相同):

<input type="text" maxlength="50" size="40" name="txtStreet" id="txtStreet" onchange="fillupMatch()"/>

function fillupMatch(){   
    $.ajax({
        type: "POST",      
        dataType: "text",
        url: "lookup_CLDS_match.cfm",      
        data: "streetAdd="+$("#txtStreet").val(),
          "city="+$("#city").val(),
          "region="+$("#region").val()
        timeout : 30000,
        success: function(response){
            $("#matches").html(response);                
        },
        error: function(){
            alert("An error has occurred");
        }
    });            
}

Answer 1

好吧，看起来您正在使用 jQuery，这使得这变得非常简单。有两种方法可以解决这个问题，您可以在 cfm 页面上生成它们，然后使用 jQuery 的 .load() 函数将它们加载到现有页面中:

$('#selectDiv').load('components.cfm #selectdiv');

还有一种更原生的方法，您可以将查询生成函数移至 CFC 中，然后使用 <cfajaxproxy> 从 javascript 调用它。 。以下示例来自在 CF8 中实现的情况，但语法对于 CF9 应该有效。一旦您创建了 cfc 的代理，您就可以像使用任何其他 javascript 对象一样使用它来调用其成员函数。 livedocs 页面底部还有一个填充选择的示例。

文档:

http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=Tags_a-b_3.html

示例:

<script type="text/javascript">
//Callback Function to display data.
function createTable(json){
   $(json).find('result').each(function(){
      var data1 = $(this).child('data1').val();
      var data2 = $(this).child('data2').val();
      var html = '<tr><td>'+data1+'</td><td>'+data2+'</td></tr>';
      $('#tbodyID').append(html);
   });
}
</script>
<table>
<thead>
</thead>
<tbody id='tbodyID'>
</tbody>
</table>