如何使用jquery在下拉列表中绑定数据？

Question

这是我的代码。单击“添加项目”按钮时调用函数 AddRow。调试后发现ajax调用没有执行，这是什么问题？

function AddRow() {
            debugger;
            $.ajax({
                type: "POST",
                dataSource: [@(JavascriptArray(Model.Categories.Select(x => new { CategoryId = x.CategoryId,Category=x.Category, Display = $"{x.Category}" }).OrderBy(x => x.Display)))],
                dataType: "json",
                contentType: "application/json",
                success: function (res) {
                    debugger;
                    $.each(res.d, function (data, value) {
                        $("#category").append($("<option></option>").val(value.categoryId).html(value.category));
                    });
                }

            });

                var row = "<tr>" +
                    "<td><input type='text' style='max-width: 300px' id='title' class='form-control' /></td>" +
                    "<td><select class='form-control' style='width: 120px;height:38px' id='category'><option value='0'></option></select></td>" +
                    //"<td><input type='text' style='max-width: 90px' name='category' id='category' class='form-control' placeholder='Category...' /></td>" +
                    "<td><input type='number' style='max-width: 75px' id='price' min=0 class='form-control' /></td>" +
                    "<td><input type='number' style='max-width: 75px' id='quantity' min=0 class='form-control' /></td>" +
                    "<td><input type='button' value='Add' onclick='addItem()' class='btn btn-success'/>&nbsp&nbsp" +
                    "<input type='button' value='Cancel' onclick='deleteNewItem(this)'name='removeLines[0]' class='btn btn-danger'  />"  +
                    "</td>" +
                    "</tr>";
                $('#CartTableBody').prepend($(row));

        }

我已经使用提供数据的操作方法更新了 url，但仍然显示警告错误消息

 $(document).ready(function () {
            debugger;
            $.ajax({
                type: "Get",
                url: "@Url.Action("GetCategory", "Release")",
                dataType: "json",
                contentType: "application/json",
                success: function (res) {
                    debugger;
                    $.each(res.d, function (data, value) {
                        $("#category").append($("<option></option>").val(value.categoryId).html(value.category));
                    });
                },
                error: function (Result) {
                    alert("Error");
                }

            });
        })

Answer 1

据我所知，jquery ajax函数不包含datasource参数。

我建议您可以使用F12浏览器开发工具查看点击Add Item按钮时的详细错误信息。

此外，ajax 将包含 url，让您的客户端向服务器端发布一些消息，服务器端向客户端返回响应。

如果你想知道如何使用 ajax 将行追加到表中，我建议你可以参考这个example。

Answer 2

           $.ajax({
                url: "YourUrl",
                type: "YourMethod",
                data: {
                },
            }).done(function (data) {
                var dropdown= $("#dropdown");
                    dropdown.html("");
                _.each(data, function (item) {
                    dropdown.append("<option value = '" + item.id+ "'>" + item.value+ "</option>");
                });
         
            }).fail(function (ex) {
                alert("Error");
            });