Coldfusion/Lucee 多条件 select 通过 AJAX
[英]Coldfusion/Lucee multiple conditional select via AJAX
问题描述
我目前正在教（重新教）自己 JavaScript 和 jQuery，以便重写在 Lucee 上运行的遗留应用程序。
部分重写需要对基本功能进行几项添加。 一个具体的补充是将“街道名称”select 字段添加到现有的“县名”->“城市名称”select 字段。
我发现这个 StackOverflow 问题： Coldfusion 条件 select 选项在 IE9、Chrome 和 Firefox 中不起作用
使用该问题的基础知识； 我写了以下内容：
<!--- county.cfm --->
<cfif structKeyExists(url,'work_area_county_id')>
<cfset loadState() />
</cfif>
<cfif structKeyExists(url,'work_area_city_id')>
<cfset loadStreet() />
</cfif>
<cfset loadCounty() />
<cffunction name="loadCounty">
<cfquery name="qCounty">
SELECT work_area_county_id, work_area_county_name FROM work_area_county
</cfquery>
</cffunction>
<cffunction name="loadState">
<cfset variables.work_area_county_id = url.work_area_county_id />
<cfquery name="qCity">
SELECT work_area_city_id, work_area_city_name, work_area_county_id FROM work_area_city WHERE work_area_county_id = <cfqueryparam value="#variables.work_area_county_id#" cfsqltype="cf_sql_int">
</cfquery>
<cfoutput>
<select name="state" class="form-control">
<option value="">Select City</option>
<cfloop query="qCity">
<option value="#work_area_city_id#">#work_area_city_name#</option>
</cfloop>
</select>
</cfoutput>
</cffunction>
<cffunction name="loadStreet">
<cfset variables.work_area_city_id = url.work_area_city_id />
<cfquery name="qStreet">
SELECT work_area_street_id, work_area_street_name, work_area_city_id FROM work_area_street WHERE work_area_city_id = <cfqueryparam value="#variables.work_area_city_id#" cfsqltype="cf_sql_int">
</cfquery>
<cfoutput>
<select name="state" class="form-control">
<option value="">Select Street</option>
<cfloop query="qStreet">
<option value="#work_area_street_id#">#work_area_street_name#</option>
</cfloop>
</select>
</cfoutput>
</cffunction>
<!--- display.cfm --->
<cfinclude template="includes/county.cfm">
<cfoutput>
<form name="state_populate">
<select name="county" id="county">
<option value="0">Select</option>
<cfloop query="qCounty">
<option value="#work_area_county_id#">
#work_area_county_name#
</option>
</cfloop>
</select>
<div id="city">
<select name="city" class="form-control">
<option value="">Select</option>
</select>
</div>
<div id="street">
<select name="street" class="form-control">
<option value="">Select</option>
</select>
</div>
</form>
</cfoutput>
// The JS
$('#county').change(function() {
var value = $('#county').val();
$.ajax({
type: "get",
url:'includes/county.cfm?work_area_county_id='+value,
success: function(response) {
$('#city').html(response);
},
error: function(jqXHR, status, error) {
console.log(status + ": " + error);
}
});
});
选择“县名”时，上面的代码效果很好。 它在第二个 select 字段中正确显示“城市名称”。 然后我尝试添加第三个 select 字段“街道名称”，并添加了我“认为”应该适用于 CFML 和 HTML 件的内容。 当我到达代码的 JS 部分时，我撞到了一堵砖墙。 我似乎找不到，也许是因为缺少正确的搜索词，如何添加额外的 AJAX 调用。
我发现了这个问题： Parallel asynchronous Ajax requests using jQuery
有多个答案，但我“认为”与我的问题最接近的答案是：
$.whenAll({
val1: $.getJSON('/values/1'),
val2: $.getJSON('/values/2')
})
.done(function (results) {
var sum = results.val1.value + results.val2.value;
$('#mynode').html(sum);
});
我相信他们被称为“承诺”？
代码需要保持第二个 select 字段“城市名称”不发生变化，并正确使用具有多个值的 AJAX“url”参数。 我知道参考上面的代码，对于 URL 部分，我可能需要一些“类似”的东西：
url:'includes/county.cfm?work_area_county_id='+ value + '&work_area_city_id=' + value
审议：
- 我知道我的代码不是很好，我知道它可以写得更好。 我正在努力改进。
- 我不是全职编码员，但多年来我一直在断断续续地编码。 我仍然认为自己是 CFML/JavaScript/jQuery 的新手，所以很多方法都超出了我的想象。
- 代码将用 cfscript 编写，并在未来转换为 CFC。 现在我让它变得简单并使用了标签。
- 我从 display.cfm 中删除了不相关的 HTML 代码。
任何关于上述内容的输入或指导将不胜感激：：D
3 个解决方案
解决方案1
0 2021-12-09 18:28:08
我将向您展示我将如何处理此类任务的示例。 我的答案可能不是最好或最干净的解决方案：我过去有过糟糕的编码实践（我仍然倾向于写意大利面条，而且我一直在努力反对这样做）。 但是，我正在改变那些坏习惯，这很有趣。
我的解决方案是使用 OOP 方法编写的。 我真的建议大家尝试 go 这条路，因为这很快就会开始感觉更自然：感觉很好，尤其是当您需要修复或扩展代码时。
我也会尝试使用 cfscript 而不是标签，因为用组件和功能编写 OOP 更简单，特别是如果您对 JavaScript 有一些经验（有点相似）。 但是，我提供了标记方法，因为我认为这就是您想要的。
该解决方案基本上由 4 个文件组成：
- display.cfm：入口模板/页面。
- components/CountiesDAO.cfc：一个组件，用作您所在县的数据访问 object，具有相应的吸气剂。 请注意，我正在模仿 QoQ 的数据库请求。 您应该能够使用您的数据源而不是那里的真实数据。
- countyForm.js : The JavaScript file with the jQuery ajax function to obtain the data deferred objects and populate the html containers with the response data (for more information please see my comments in the code).
- ajaxAPI.cfm：为您的 jQuery ajax 请求将所有数据回显/输出为 JSON 的模板。
主要问题是您需要为每个 ajax 请求检索更多 JavaScript 承诺。 在 jQuery 中，延迟 object 会发生这种情况。
以下是文件：
1. 显示.cfm ：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<body>
<cfset CountiesDAO= new components.CountiesDAO() />
<cfset queryWorkAreaCounties=CountiesDAO.getWorkAreaCounties()>
<cfoutput>
<select id="county">
<option value="0">Select</option>
<cfloop query="queryWorkAreaCounties">
<option value="#queryWorkAreaCounties.work_area_county_id#">
#queryWorkAreaCounties.work_area_county_name#
</option>
</cfloop>
</select>
<div id="cityContainer"></div>
<div id="streetContainer"></div>
</cfoutput>
<!-- embedded jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="countyForm.js"></script>
</body>
</html>
2.组件/CountiesDAO.cfc
<cfcomponent>
<cffunction name="init">
<cfset variables.queriesQoQ["work_area_counties"]=createWorkAreaCounties()>
<cfset variables.queriesQoQ["Work_area_cities"]=createWorkAreaCities()>
<cfset variables.queriesQoQ["Work_area_streets"]=createWorkAreaStreets()>
<cfreturn this>
</cffunction>
<!--- functions to create Data to emulate a DB with QoQ --->
<cffunction name="createWorkAreaCounties"
access="private"
returntype="query"
hint="create query to simulate a DB data table for QoQ">
<cfset work_area_countyTable= queryNew(
"work_area_county_id, work_area_county_name",
"integer,varchar",
[
{"work_area_county_id":1,"work_area_county_name":"Los Angeles County"},
{"work_area_county_id":2,"work_area_county_name":"Cook County"},
{"work_area_county_id":3,"work_area_county_name":"Harris County"},
{"work_area_county_id":4,"work_area_county_name":"Maricopa County"}
])/>
<cfreturn work_area_countyTable>
</cffunction>
<cffunction name="createWorkAreaCities"
access="private"
returntype="query"
hint="create query to simulate a DB data table for QoQ">
<cfset work_area_cityTable= queryNew(
"work_area_city_id, work_area_city_name, work_area_county_id",
"integer,varchar,integer",
[
{"work_area_city_id":1,"work_area_city_name":"Agoura Hills" , "work_area_county_id":1},
{"work_area_city_id":2,"work_area_city_name":"Alhambra" , "work_area_county_id":1},
{"work_area_city_id":3,"work_area_city_name":"Bradbury" , "work_area_county_id":1},
{"work_area_city_id":4,"work_area_city_name":"Arlington Heights" , "work_area_county_id":2},
{"work_area_city_id":5,"work_area_city_name":"Bellwood" , "work_area_county_id":2},
{"work_area_city_id":6,"work_area_city_name":"Bridgeview" , "work_area_county_id":2},
{"work_area_city_id":7,"work_area_city_name":"Baytown" , "work_area_county_id":3},
{"work_area_city_id":8,"work_area_city_name":"Cove" , "work_area_county_id":3},
{"work_area_city_id":9,"work_area_city_name":"The Woodlands" , "work_area_county_id":3},
{"work_area_city_id":10,"work_area_city_name":"Avondale" , "work_area_county_id":4},
{"work_area_city_id":11,"work_area_city_name":"Phoenix" , "work_area_county_id":4},
{"work_area_city_id":12,"work_area_city_name":"Glendale" , "work_area_county_id":4},
])/>
<cfreturn work_area_cityTable>
</cffunction>
<cffunction name="createWorkAreaStreets"
access="private"
returntype="query"
hint="create query to simulate a DB data table for QoQ">
<cfset work_area_streetTable= queryNew(
"work_area_street_id, work_area_street_name, work_area_city_id",
"integer,varchar,integer",
[
{"work_area_street_id":1,"work_area_street_name":"Street One Agoura Hills", "work_area_city_id": 1 },
{"work_area_street_id":2,"work_area_street_name":"Street Two Agoura Hills", "work_area_city_id": 1 },
{"work_area_street_id":3,"work_area_street_name":"Street Three Agoura Hills", "work_area_city_id": 1 },
{"work_area_street_id":4,"work_area_street_name":"Street One Alhambra", "work_area_city_id": 2 },
{"work_area_street_id":5,"work_area_street_name":"Street Two Alhambra", "work_area_city_id": 2 },
{"work_area_street_id":6,"work_area_street_name":"Street Three Alhambra", "work_area_city_id": 2 },
{"work_area_street_id":7,"work_area_street_name":"Street One Bradbury", "work_area_city_id": 3 },
{"work_area_street_id":8,"work_area_street_name":"Street Two Bradbury", "work_area_city_id": 3 },
{"work_area_street_id":9,"work_area_street_name":"Street One Arlington Heights", "work_area_city_id": 4 },
{"work_area_street_id":10,"work_area_street_name":"Street Two Arlington Heights", "work_area_city_id": 4 },
{"work_area_street_id":11,"work_area_street_name":"Street One Bellwood", "work_area_city_id": 5 },
{"work_area_street_id":12,"work_area_street_name":"Street Two Bellwood", "work_area_city_id": 5 },
{"work_area_street_id":13,"work_area_street_name":"Street One Bridgeview", "work_area_city_id": 6 },
{"work_area_street_id":14,"work_area_street_name":"Street Two Bridgeview", "work_area_city_id": 6 },
{"work_area_street_id":15,"work_area_street_name":"Street One Baytown", "work_area_city_id": 7 },
{"work_area_street_id":16,"work_area_street_name":"Street Two Baytown", "work_area_city_id": 7 },
{"work_area_street_id":17,"work_area_street_name":"Street One Cove", "work_area_city_id": 8 },
{"work_area_street_id":18,"work_area_street_name":"Street Two Cove", "work_area_city_id": 8 },
{"work_area_street_id":19,"work_area_street_name":"Street One The Woodlands", "work_area_city_id": 9 },
{"work_area_street_id":20,"work_area_street_name":"Street Two The Woodlands", "work_area_city_id": 9 },
{"work_area_street_id":21,"work_area_street_name":"Street One Avondale", "work_area_city_id": 10 },
{"work_area_street_id":22,"work_area_street_name":"Street Two Avondale", "work_area_city_id": 10 },
{"work_area_street_id":23,"work_area_street_name":"Street One Phoenix", "work_area_city_id": 11 },
{"work_area_street_id":24,"work_area_street_name":"Street Two Phoenix", "work_area_city_id": 11 },
{"work_area_street_id":25,"work_area_street_name":"Street One Glendale", "work_area_city_id": 12 },
{"work_area_street_id":26,"work_area_street_name":"Street Two Glendale", "work_area_city_id": 12 },
])/>
<cfreturn work_area_streetTable>
</cffunction>
<cffunction name="getWorkAreaCounties"
access="public"
returntype="query"
hint="function to return all counties">
<cfset work_area_county=queriesQoQ["work_area_counties"]>
<cfquery name="qCity" dbtype="query" >
SELECT * FROM work_area_county
</cfquery>
<cfreturn qCity>
</cffunction>
<cffunction name="getWorkAreaCitiesByCountyID"
access="public"
returntype="query"
hint="function to return all cities of a county">
<cfargument type="numeric" name="countyid" required="true">
<cfset work_area_city=queriesQoQ["work_area_cities"]>
<cfquery name="qCity" dbtype="query" >
SELECT work_area_city_id, work_area_city_name, work_area_county_id
FROM work_area_city
WHERE work_area_county_id = <cfqueryparam value="#arguments.countyid#" cfsqltype="cf_sql_int">
</cfquery>
<cfreturn qCity>
</cffunction>
<cffunction name="getWorkAreaStreetsByCityID"
access="public"
returntype="query"
hint="function to return all streets of a city">
<cfargument type="numeric" name="cityid" required="true">
<cfset work_area_street=queriesQoQ["work_area_streets"]>
<cfquery name="qStreet" dbtype="query" >
SELECT work_area_street_id, work_area_street_name, work_area_city_id
FROM work_area_street
WHERE work_area_city_id = <cfqueryparam value="#arguments.cityid#" cfsqltype="cf_sql_int">
</cfquery>
<cfreturn qStreet>
</cffunction>
</cfcomponent>
3.countyForm.js
// ajax function
function sendAjaxAndUpdateForm(
url,
selectorForValue,
selectorForHTMLResponse ,
callbackFunction ){
let value = $( selectorForValue ).val();
/* return the ajax request as deferred object with done()/fail(). For more information, please see:
* https://api.jquery.com/jquery.ajax/
* https://stackoverflow.com/questions/10931836/should-i-use-done-and-fail-for-new-jquery-ajax-code-instead-of-success-and
*/
return $.ajax({
method: "GET",
url: url + value,
}).done( function( result ) {
//populate HTML div with returned html
$( selectorForHTMLResponse ).html( result.contentHTML );
// invoke callback if a callback has been submitted
if ( callbackFunction && typeof( callbackFunction ) === "function") {
callbackFunction();
}
}).fail( function( e ) {
//log some info and alert about fail
console.dir( e.responseText );
alert('Ops! Something went wrong!');
});
}
$( document ).ready(function() {
// add listeners to HTML container and make use of callbacks
$('#county').change(
function() {
sendAjaxAndUpdateForm(
url='ajaxAPI.cfm?work_area_county_id=',
selectorForValue='#county',
selectorForHTMLResponse='#cityContainer',
callbackFunction= function(){ $('#city').change(
function() {
sendAjaxAndUpdateForm(
url='ajaxAPI.cfm?work_area_city_id=',
selectorForValue='#city',
selectorForHTMLResponse='#streetContainer',
callbackFunction=function(){ $('#street').change(
function(){ alert( 'Street ID:' + $('#street').val() + 'for \'' + $( '#street option:selected' ).text() + '\' selected.' )} )
}
);
})
}
);
});
});
4.ajaxAPI.cfm
<!--- Function to output content as JSON for a response of the ajax request --->
<cffunction name="outputJSON"
access="private"
returntype="void"
hint="function to output data as application/json">
<cfargument type="struct" name="contentStruct" required="true">
<cfcontent reset = "true">
<cfheader name="content-type" value="application/json">
<cfoutput>#serializeJSON( contentStruct )#</cfoutput>
<cfabort>
</cffunction>
<!--- instantiate Data Access Object Component--->
<cfset CountiesDAO = new components.CountiesDAO() />
<cfif structKeyExists(url, "work_area_county_id")
and len( work_area_county_id ) gt 0>
<cfset queryWorkAreaCities=CountiesDAO.getWorkAreaCitiesByCountyID( url.work_area_county_id )>
<cfsavecontent variable="result.contentHTML">
<cfoutput>
<select name="city" id="city" class="form-control">
<option value="">Select City</option>
<cfloop query="queryWorkAreaCities">
<option value="#queryWorkAreaCities.work_area_city_id#">#queryWorkAreaCities.work_area_city_name#</option>
</cfloop>
</select>
</cfoutput>
</cfsavecontent>
<!--- echo json --->
<cfset outputJSON( result )>
</cfif>
<cfif structKeyExists( url, "work_area_city_id" ) and len( work_area_city_id ) gt 0>
<cfset queryWorkAreaStreets=CountiesDAO.getWorkAreaStreetsByCityID( url.work_area_city_id )>
<cfsavecontent variable="result.contentHTML">
<cfoutput>
<select name="street" id="street" class="form-control">
<option value="">Select Street</option>
<cfloop query="queryWorkAreaStreets">
<option value="#queryWorkAreaStreets.work_area_street_id#">#queryWorkAreaStreets.work_area_street_name#</option>
</cfloop>
</select>
</cfoutput>
</cfsavecontent>
<!--- echo json --->
<cfset outputJSON( result )>
</cfif>
上述解决方案远未完成，但它应该只是为您提供一个开始玩耍并获得乐趣的选择。
解决方案2
0 2021-12-10 10:52:25
（我之前开始写这个，但被拉走了......）
county.cfm脚本让我觉得太努力了，想成为“每个人的一切”:)。 它充当 ajax 的 cfinclude和端点，既检索数据又生成 html。 因此，结果比 IMO 所需的可读性更差，更复杂。
一种更简洁的方法是将数据检索和 html/dom 操作分开。 创建一个只返回数据的 cfc。 然后在客户端，通过 ajax 调用 cfc 函数，并使用响应用 javascript 填充 select 列表。
你的组件.CFC
首先创建一个包含三个远程函数的组件： getCounties() 、 getCities(selected_county_id) 、 getStreets(selected_city_id) 。 每个 function 只运行一个查询并将结果作为结构数组返回，格式为 json 字符串。
<cfcomponent>
<cffunction name="getCounties" access="remote" returntype="string" returnFormat="plain">
<!--- query is a function local object, use "local" scope --->
<cfquery name="local.result">
SELECT work_area_county_id, work_area_county_name
FROM work_area_county
ORDER BY work_area_county_name
</cfquery>
<!--- convert query into workable format: array of structures --->
<cfreturn serializeJSON(local.result, "struct")>
</cffunction>
<cffunction name="getCities" access="remote" returntype="string" returnFormat="plain">
<cfargument name="work_area_county_id" type="numeric" required="true">
<cfquery name="local.result">
SELECT work_area_city_id, work_area_city_name
FROM work_area_city
<!--- correct sql type is "integer" or "cf_sql_intEGER" --->
WHERE work_area_county_id = <cfqueryparam value="#arguments.work_area_county_id#" cfsqltype="integer">
ORDER BY work_area_city_name
</cfquery>
<cfreturn serializeJSON(local.result, "struct")>
</cffunction>
<cffunction name="getStreets" access="remote" returntype="string" returnFormat="plain">
<cfargument name="work_area_city_id" type="numeric" required="true">
<cfquery name="local.result">
SELECT work_area_street_id, work_area_street_name
FROM work_area_street
WHERE work_area_city_id = <cfqueryparam value="#arguments.work_area_city_id#" cfsqltype="integer">
ORDER BY work_area_street_name
</cfquery>
<cfreturn serializeJSON(local.result, "struct")>
</cffunction>
</cfcomponent>
显示.cfm
然后在表单中，添加 ajax 调用以填充列表。 加载文档时填充“县”列表，并在适当的更改事件上填充“城市/街道”列表。 有改进的余地，但这里有一个小例子
<script type="text/javascript">
$(document).ready(function()
{
// On load, populate county list
$.getJSON(
"YourComponent.cfc?method=getCounties",{},
function(response){
$('#street').attr('disabled', true);
$('#city').attr('disabled', true);
fillList("#county", response, "work_area_county_id", "work_area_county_name")
});
// When county change, re-populate cities
$("#county").on("change", function(evt) {
$('#city').attr('disabled', true);
$('#street').attr('disabled', true);
var county_id = $(this).val();
$.getJSON(
"YourComponent.cfc?method=getCities&work_area_county_id="+ county_id, {},
function(response){
fillList("#city", response, "work_area_city_id", "work_area_city_name")
});
});
// On city change, re-populate streets
$("#city").on("change", function(evt) {
$('#street').attr('disabled', true);
var city_id = $(this).val();
$.getJSON(
"YourComponent.cfc?method=getStreets&work_area_city_id="+ city_id, {},
function(response){
fillList("#street", response, "work_area_street_id", "work_area_street_name")
});
});
// populates select list with provided data
function fillList( id, rows, value, text) {
// reinitialize
$( id ).empty().append( $("<option>")
.text( "Select" )
.val( 0 )
);
// populate
$.each(rows, function(index, data) {
$(id).append( $("<option>")
.val( data[value] )
.text( data[text] )
);
});
// enable
$(id).attr('disabled', false);
}
});
</script>
<form name="state_populate">
<!--- select list must have an "id" --->
<select id="county" name="county">
<option value="0">Select</option>
</select>
<select id="city" name="city">
<option value="0">Select</option>
</select>
<select id="street" name="street">
<option value="0">Select</option>
</select>
</form>
解决方案3
0 2021-12-13 23:08:42
对于未来的观众； 我想发表我自己对我的问题的回答。 在等待发布答案的同时，我一直在尝试让代码正常工作。 很多天过去了，我在下面粘贴的是结果。
由于 AndreasRu 和 SOS 的答案都更好，我最终没有使用我写的东西。 也许有人可以使用我的代码作为不该做什么的例子。 :D
我的 CFC：
component displayname="pull_locations" output="false" {
public function getCounties(returntype="query") {
getCounties = queryExecute(
sql = "SELECT work_area_county_id, work_area_county_name FROM work_area_county"
);
return getCounties;
}
remote function getCitiesByCounty(required numeric county_id) returnFormat="JSON" {
getCity = queryExecute(
sql = "SELECT work_area_county_id, work_area_city_id, work_area_city_name FROM work_area_city WHERE work_area_county_id = :need",
params = {
need: {
value: arguments.county_id,
type: "cf_sql_integer"
}
}
);
rData = {
"status" = "success",
"data" = queryToArray(getCity)
};
return serializeJSON(rData);
}
remote function getStreetsByCity(required numeric city_id) returnFormat="JSON" {
getStreet = queryExecute(
sql = "SELECT work_area_city_id, work_area_street_id, work_area_street_name FROM work_area_street WHERE work_area_city_id = :need",
params = {
need: {
value: arguments.city_id,
type: "cf_sql_integer"
}
}
);
rData = {
"status" = "success",
"data" = QueryToArray(getStreet)
};
return serializeJSON(rData);
}
// Thank you Ben Nadel! :D
public function queryToArray(required query Data) output=false {
var LOCAL = StructNew();
LOCAL.Columns = ListToArray( ARGUMENTS.Data.ColumnList );
LOCAL.QueryArray = ArrayNew( 1 );
for (LOCAL.RowIndex = 1 ; LOCAL.RowIndex LTE ARGUMENTS.Data.RecordCount ; LOCAL.RowIndex = (LOCAL.RowIndex + 1)){
LOCAL.Row = StructNew();
for (LOCAL.ColumnIndex = 1 ; LOCAL.ColumnIndex LTE ArrayLen( LOCAL.Columns ) ; LOCAL.ColumnIndex = (LOCAL.ColumnIndex + 1)){
LOCAL.ColumnName = LOCAL.Columns[ LOCAL.ColumnIndex ];
LOCAL.Row[ LOCAL.ColumnName ] = ARGUMENTS.Data[ LOCAL.ColumnName ][ LOCAL.RowIndex ];
}
ArrayAppend( LOCAL.QueryArray, LOCAL.Row );
}
return LOCAL.QueryArray;
}
}
我的 JavaScript/jQuery：
function loadCity(county) {
if(county != '') {
$.ajax({
url: "cfc/data.cfc?method=getCitiesByCounty",
dataType: "json",
type: "get",
async: false,
cache: false,
data: {
county_id: county,
},
success: function (response) {
response = JSON.parse(response);
if(response.status == 'success') {
rData = response.data;
let html = '<option value="">Select City</option>';
rData.forEach(element => {
html += '<option value="'+element.WORK_AREA_CITY_ID+'">'+element.WORK_AREA_CITY_NAME+'</option>';
});
$('#city').html(html);
let html2 = '<option value="">Select Street</option>';
$('#street').html(html2);
}
else {
alert('Error occured while pulling City name.');
}
},
error: function(jqXHR, status, error) {
console.log(status + ": " + error);
}
})
}
}
function loadStreet(city) {
if(city != '') {
$.ajax({
url: "cfc/data.cfc?method=getStreetsByCity",
dataType: "json",
type: "get",
async: false,
cache: false,
data: {
city_id: city,
},
success : function(response) {
response = JSON.parse(response);
if(response.status == 'success') {
rData = response.data;
let html = '<option value="">Select Street</option>';
rData.forEach(element => {
html += '<option value="'+element.WORK_AREA_STREET_ID+'">'+element.WORK_AREA_STREET_NAME+'</option>';
});
$('#street').html(html);
}
else {
alert('Error occured while pulling Street name.');
}
},
error: function(jqXHR, status, error) {
console.log(status + ": " + error);
}
})
}
}
发送多个HTML表单 <select>使用AJAX通过POST请求框？
[英]Sending HTML Form Multiple <select> box via POST request with AJAX?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.