使用 AJAX 从 ColdFusion 组件页面获取数据,并用结果填充另一个下拉列表
Using AJAX to get data from a ColdFusion component page, and fill another dropdown with results
我知道之前有人提出过类似的问题并得到了回答,但我的代码存在特定问题。当带有 id="SITE"
的下拉菜单发生变化时,我希望带有 id="YARD"
的下拉菜单填充来自该站点的码。这是我的组件 CFC 代码(在名为 AjaxFunctions.cfc 的页面中):
<cfcomponent output="false">
<!--- Get YARDS dataset based on SITE --->
<cffunction name="getYards" access="remote" returntype="query" />
<cfargument name="Site" type="string" required="true" />
<cfquery name="rs_Yards" datasource="abc" username="notReal1" password="notReal2" >
<!--- SQL code here --->
</cfquery>
<cfreturn rs_Yards />
</cffunction>
<cfcomponent>
这是我调用页面头部的接收代码:
<script>
$(document).ready(function() {
$("#SITE").change(function() {
alert( "SITE has changed." );// testing to see if jQuery works
// empty YARD dropdown
$("#YARD").empty();
// perform ajax
$.ajax({
type: "GET",
url: "AjaxFunctions.cfc",
data: {
method: "getYards",
Site: $("#SITE").val()
},
datatype: "json",
success: function(data) {
alert("We received the data."+data);
$.each(data, function () {
$("#YARD").append($("<option></option>").val(this['ITEMID']).html(this['ITEMDESC']));
}
}
});
});
});
</script>
天哪,我按原样尝试代码,绝对没有任何反应。当我只注释掉这些行时
$.each(data, function () {
$("#YARD").append($("<option></option>").val(this['ITEMID']).html(this['ITEMDESC']));
}
然后我收到通知 "the SITE has changed" 并且 YARD 下拉列表为空,但是 "We received the data..." 警报看起来像来自错误页面的 HTML 代码。我想我可以担心稍后更新 YARD 下拉列表,现在我担心的只是从查询中接收数据。
你能改变cffunction吗? ColdFusion 的 JSON 查询格式很愚蠢。 IMO,更改功能更简单。 Return 一个结构数组,其中包含您想要的任何键名,例如 "yard"。 (不要忘记限定函数变量的范围并将 returntype
更改为 "array")
<cfcomponent output="false">
<cffunction name="getYards" access="remote" returntype="array" >
<cfargument name="Site" type="string" required="true" />
<cfset var rs_Yards = "">
<cfset var response = []>
<!--- demo data. replace this with your cfquery --->
<cfset rs_Yards = QueryNew("")>
<cfset queryAddColumn(rs_Yards, "Yard", ["X-745-C ","X-745-C5","X-745-E ","X-745-G "])>
<cfloop query="rs_Yards">
<cfset arrayAppend(response, { "yard": rs_Yards.yard })>
</cfloop>
<cfreturn response />
</cffunction>
</cfcomponent>
合并我在评论中提到的其他更改:
- Javascript 区分大小写。将
datatype
更改为 dataType
(大写 "T")
- 将 URL 更改为从组件请求 JSON:
AjaxFunctions.cfc?method=getYards&returnformat=json
最后,在 $.each()
循环中使用新键名 "yard"。
JQuery:
$(document).ready(function() {
$("#SITE").change(function() {
$("#YARD").empty();
$.ajax({
type: "GET",
url: "AjaxFunctions.cfc?method=getYards&returnformat=JSON",
data: {Site: $("#SITE").val()},
dataType: "json",
success: function(data) {
$.each(data, function() {
$("#YARD").append($("<option></option>").val(this.yard).text(this.yard));
});
}
});
});
});
HTML:
<form>
<select id="SITE" name="SITE">
<option value="123">One</option>
<option value="456">Two</option>
</select>
<select id="YARD">
<option value="123">select somthing</option>
</select>
</form>
非常感谢@Ageax 的所有帮助。我最终选择了一条简单得多的路线。这是我的功能:
<cfcomponent output="false">
<!--- Get YARDS dataset based on SITE --->
<cffunction name="getYards" access="remote" returntype="string" returnformat="plain" >
<cfargument name="Site" type="string" required="true" />
<cfquery name="rs_Yards" datasource="MyDatasource" >
<!--- SQL code here --->
</cfquery>
<cfset myList = ValueList(rs_Yards.Yard)> <!--- convert query results to list --->
<cfreturn MyList />
</cffunction>
</cfcomponent>
这是我在调用页面上的 jQuery:
<!--- jQuery/AJAX to autofill dropdowns --->
<script>
$(document).ready(function() {
$("#SITE").change(function() { // when the SITE dropdown changes
$("#YARD").empty(); // empty the YARD dropdown
$.ajax({
type: "GET",
url: "AjaxFunctions.cfc",
data: {
Site: $("#SITE").val(),
Method: "getYards"
},
dataType: "text",
success: function(data) {
var options = data.split(","); // convert returned list to array
var select = document.getElementById('YARD');
for(var i=0;i<options.length; i++)
{
var options2 = $.trim(options[i]); // clean up label portion
$("#YARD").append($("<option></option>").val(options[i]).text(options2)); // append options to YARD dropdown
}
}
});
});
});
</script>
希望这对其他人有帮助。
我知道之前有人提出过类似的问题并得到了回答,但我的代码存在特定问题。当带有 id="SITE"
的下拉菜单发生变化时,我希望带有 id="YARD"
的下拉菜单填充来自该站点的码。这是我的组件 CFC 代码(在名为 AjaxFunctions.cfc 的页面中):
<cfcomponent output="false">
<!--- Get YARDS dataset based on SITE --->
<cffunction name="getYards" access="remote" returntype="query" />
<cfargument name="Site" type="string" required="true" />
<cfquery name="rs_Yards" datasource="abc" username="notReal1" password="notReal2" >
<!--- SQL code here --->
</cfquery>
<cfreturn rs_Yards />
</cffunction>
<cfcomponent>
这是我调用页面头部的接收代码:
<script>
$(document).ready(function() {
$("#SITE").change(function() {
alert( "SITE has changed." );// testing to see if jQuery works
// empty YARD dropdown
$("#YARD").empty();
// perform ajax
$.ajax({
type: "GET",
url: "AjaxFunctions.cfc",
data: {
method: "getYards",
Site: $("#SITE").val()
},
datatype: "json",
success: function(data) {
alert("We received the data."+data);
$.each(data, function () {
$("#YARD").append($("<option></option>").val(this['ITEMID']).html(this['ITEMDESC']));
}
}
});
});
});
</script>
天哪,我按原样尝试代码,绝对没有任何反应。当我只注释掉这些行时
$.each(data, function () {
$("#YARD").append($("<option></option>").val(this['ITEMID']).html(this['ITEMDESC']));
}
然后我收到通知 "the SITE has changed" 并且 YARD 下拉列表为空,但是 "We received the data..." 警报看起来像来自错误页面的 HTML 代码。我想我可以担心稍后更新 YARD 下拉列表,现在我担心的只是从查询中接收数据。
你能改变cffunction吗? ColdFusion 的 JSON 查询格式很愚蠢。 IMO,更改功能更简单。 Return 一个结构数组,其中包含您想要的任何键名,例如 "yard"。 (不要忘记限定函数变量的范围并将 returntype
更改为 "array")
<cfcomponent output="false">
<cffunction name="getYards" access="remote" returntype="array" >
<cfargument name="Site" type="string" required="true" />
<cfset var rs_Yards = "">
<cfset var response = []>
<!--- demo data. replace this with your cfquery --->
<cfset rs_Yards = QueryNew("")>
<cfset queryAddColumn(rs_Yards, "Yard", ["X-745-C ","X-745-C5","X-745-E ","X-745-G "])>
<cfloop query="rs_Yards">
<cfset arrayAppend(response, { "yard": rs_Yards.yard })>
</cfloop>
<cfreturn response />
</cffunction>
</cfcomponent>
合并我在评论中提到的其他更改:
- Javascript 区分大小写。将
datatype
更改为dataType
(大写 "T") - 将 URL 更改为从组件请求 JSON:
AjaxFunctions.cfc?method=getYards&returnformat=json
最后,在 $.each()
循环中使用新键名 "yard"。
JQuery:
$(document).ready(function() {
$("#SITE").change(function() {
$("#YARD").empty();
$.ajax({
type: "GET",
url: "AjaxFunctions.cfc?method=getYards&returnformat=JSON",
data: {Site: $("#SITE").val()},
dataType: "json",
success: function(data) {
$.each(data, function() {
$("#YARD").append($("<option></option>").val(this.yard).text(this.yard));
});
}
});
});
});
HTML:
<form>
<select id="SITE" name="SITE">
<option value="123">One</option>
<option value="456">Two</option>
</select>
<select id="YARD">
<option value="123">select somthing</option>
</select>
</form>
非常感谢@Ageax 的所有帮助。我最终选择了一条简单得多的路线。这是我的功能:
<cfcomponent output="false">
<!--- Get YARDS dataset based on SITE --->
<cffunction name="getYards" access="remote" returntype="string" returnformat="plain" >
<cfargument name="Site" type="string" required="true" />
<cfquery name="rs_Yards" datasource="MyDatasource" >
<!--- SQL code here --->
</cfquery>
<cfset myList = ValueList(rs_Yards.Yard)> <!--- convert query results to list --->
<cfreturn MyList />
</cffunction>
</cfcomponent>
这是我在调用页面上的 jQuery:
<!--- jQuery/AJAX to autofill dropdowns --->
<script>
$(document).ready(function() {
$("#SITE").change(function() { // when the SITE dropdown changes
$("#YARD").empty(); // empty the YARD dropdown
$.ajax({
type: "GET",
url: "AjaxFunctions.cfc",
data: {
Site: $("#SITE").val(),
Method: "getYards"
},
dataType: "text",
success: function(data) {
var options = data.split(","); // convert returned list to array
var select = document.getElementById('YARD');
for(var i=0;i<options.length; i++)
{
var options2 = $.trim(options[i]); // clean up label portion
$("#YARD").append($("<option></option>").val(options[i]).text(options2)); // append options to YARD dropdown
}
}
});
});
});
</script>
希望这对其他人有帮助。