如何使用 ZD7EFA19FBE7D2372FD5ADB6D6024 后面的 jQuery 填充 HTML select 框（下拉列表）

Question

我正在尝试填充 HTML 前端的下拉列表和 C# 代码后面的空白 ASPX 页面，该页面用作使用 jQuery/AJAX 的本地服务器。 我是新手，所以请记住这一点。

我尝试了多种不同的方法，但到目前为止都没有成功。 这是我到目前为止的代码：

jQuery 声明：

var uri = 'http://localhost:60970/ItemProc.aspxproducts';

    $(document).ready(function () {
        // Send an AJAX request
        $.getJSON(uri)
            .done(function (data) {
                // On success, 'data' contains a list of products.
                $.each(data, function (key, item) {
                    // Add a list item for the product.
                    $('<option>', { text: item }).appendTo($('#test'));
                });
            });
    });

我要填充的 HTML 下拉列表：

<h2>All Products</h2>
<select id="test" />

上述 jQuery 语句中的 ASPX url 后面的 C# 代码：

protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
            String outstr = "";
            outstr += "1";
            outstr += "2";
            outstr += "3";
            Response.Write(outstr);
        }
        catch (Exception ex)
        {
            Response.Write(ex.Message);
        }
    }
 }

我希望最终结果是测试下拉列表，其中包含来自 C# 代码的 1、2、3，但到目前为止我尝试过的任何事情都没有成功。 再次感谢您提供的任何帮助。

Answer 1

这一定是一个糟糕的 uri： http://localhost:60970/ItemProc.aspxproducts

所以这是错误的一件事。

Next more fundamental problem is your using an ASP.NET Web Forms Page Lifecycle hook/event to serve data and you think that this is an exposed endpoint that your Jquery could call via AJAX and/or callable with Javascript client side AJAX. 情况并非如此。

The Page_Load event is fired server side, on a Windows Server running IIS and ASP.NET Web Forms application. 您对 Page_Load 的实现将做一些臭名昭著且令人厌恶的事情（如果您在 1 年内做了比 ASP.NET Web Forms:

if(!IsPostBack) {
//init some data from SQL and bind to a WebForms DataGrid or something like that for example
}

您在Page_Load中的响应去了哪里？ 谁/什么接收它？ 没有人，也没有人接受它，至少不是以任何有意义或适当的方式。

现在，回到你不正确的 uri。 它不正确的第一个明显原因是格式： http://localhost:60970/ItemProc.aspxproducts这不可能是有效资源：ItemProc.aspxproducts。 我不会在这里详细说明这一点，希望这将开始有意义。

现在，您要做的是调用端点并获得数据响应。您正在使用 jQuery 对端点执行 AJAX 调用，更重要的是，您正在从客户端进行 AJAX 调用。 这个客户端可以是一个移动应用程序、一个 web 应用程序、一个 web 页面、一些信息亭设备等等。

ASP.NET 可以为客户端请求提供数据，这就是 ASP.NET 所做的，它在服务器上运行以提供请求的资源。 您甚至可以将来自 Web Form.aspx 资源代码的数据服务于客户端 AJAX 请求。 您可以使用一个属性将 Web 表单的代码隐藏方法公开为 Windows 服务器上的端点，以便可以将其称为客户端...

但是不要那样做，使用.aspx Web 表单后面的代码以单一目的方式使用，后面的代码可以与 that.aspx Web 表单一起使用。 这就是那个可怕的说法“背后的代码”的来源，它的代码背后是 specific.aspx Web 表格。

为您的 AJAX 调用使用“处理程序”。 这是一个可以在Visual Studio中创建的资源，Add New => Handler，扩展名为.ashx。 您可以创建可以使用 url 调用的端点并返回数据。 这样，与 Web 表单相关联的代码和用于 AJAX 调用的代码之间就不会混淆。

这是一个很好的简单示例。

By the way, I know I will probably be voted down for this part of my answer but it is still worth it to share with you: Do not use ASP.NET Web Forms or ASP.NET MVC for your frontend User Interface/web needs. Its fine to use ASP.NET for a middle tier but using Web Forms to render/bind UI components or ASP.NET MVC Razor, for that matter, in a software engineering life path is a bad direction. ASP.NET Web Forms was bad from the start: brittle, complex, obscuring the way HTTP, HTML, CSS and Javascript worked. 它旨在允许 Windows Forms 开发人员更轻松地迁移以开发 Web 应用程序。 ASP.NET MVC was an improvement, but, in the end, the same thing: this tightly coupled obfuscation to how a web app works and runs on clients, like web browsers, that only read HTML/CSS and Javascript. 在这个时代，任何当代前端，值得它的重量，都是一个高度独立的层，解耦，调用 API。 现代前端是独立构建的，通常可以独立进行大量测试，并且非常自然地模块化，具有许多单一用途、可重用的构建块 UI 组件。 Use ASP.NET Handlers or Controllers to serve as the APIs, sure, preferably use ASP.NET Core running on Linux in Containers if you are going to use ASP.NET at all. 但决不能使用 ASP.NET WebForms <% WTF %> 或 @Html.TextBoxFor（我与 Web Z6450242531912981C3683CAE88A32A6 基本相同） PS you can easily integrate React.js in a ASP.NET Web Forms or ASP.NET MVC application for new features so legacy existing code isn't much of an excuse.

Answer 2

关于您的代码和逻辑，下面的代码可能会有一些变化。 请使用以下代码作为您的问题陈述。 您可以更轻松地创建其动态 HTML，然后通过 ID 分配给 select。

 var uri = 'http://localhost:60970/ItemProc.aspxproducts';

$(document).ready(function () {
    // Send an AJAX request
    $.getJSON(uri)
        .done(function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, item) {
                // Add a list item for the product.
                 var opt ='';
                  for(var i=0;i<item.length;i++) // you can use length of items
                   {
                    opt +='<option>'+ item.text;
                    opt +='</option';
                   }    
                   $('#test').append(opt);

            });
        });
});

Answer 3

使用 google 或仅使用 stackoverflow 搜索框进行搜索怎么样？ 重复的 jQuery：填充下拉列表的最佳实践？

我想你可以在这里找到你想要的。