在最近的一个项目中,我不得不更正许多将填充 HTML 选择下拉列表的 AJAX 请求 ,在这篇文章中,我将向您展示如何处理 AJAX 请求返回并使用以下内容填充下拉列表的快速片段回复。
首先,我们首先在页面上创建一个带有 ID 属性的 HTML 下拉列表。
<select id="dropdown"></select>
接下来,我们在 jQuery 中创建一个 AJAX POST 到 urlPath,它将返回我们在 JSON 对象中需要的数据。在返回此 AJAX 请求时,我们将解析响应并在我们将创建的 helpers.buildDropdown 函数中使用它。
<select id="dropdown"></select>
我们期望来自 AJAX 调用的响应是一个类似于以下数据的 JSON 对象,它可以由多行组成,每行都有一个 ID 列和一个 NAME 列。
ID 列将用于填充选项元素值属性,而 NAME 列将用作选项元素内的文本。您可以拥有任何您想要的字段,但在此示例中,这些是 buildDropdown 函数中预期的列。
<select id="dropdown"></select>
通过创建数据并以预期的方式返回数据,我们现在可以创建 buildDropdown 函数。首先,我们首先将这个函数放在一个 helpers 命名空间中,因此当你创建更多有用的函数时,你可以继续添加到这个命名空间。
接下来创建函数并传入 3 个参数,结果是 JSON 数据对象,下拉列表是下拉列表的 jQuery 对象,emptyMessage 是我们可以在第一个空选项上使用的文本。
<select id="dropdown"></select>