在列表框中显示方法的结果

Display the result of a method in a Listbox

本文关键字：方法 结果 显示 列表      更新时间：2023-09-26

我创建了一个WCF项目，我正在尝试在列表框中显示一些信息。我希望当我单击一个按钮时，它将调用我的方法并将其显示在列表框中。我的方法工作正常，但我无法在我的列表框中显示它。这是我正在尝试的代码：

        $('#btnListBlob').click(function () {
            $.ajax({
                type: "POST",
                url: 'http://localhost:50525/BlobService.svc/ListBlob',
                data: JSON.stringify(),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                processData: true,
                success: function (data) {
                    $(data).appendTo('#blobList')
                    alert('listed');
                },
                error: function (data) {
                    alert('Some error Occurred!');
                }
            });
        });

我希望在 URL 中调用的方法显示在 #blobList 中。

您可能需要查看要追加的数据。数据应采用以下形式：

<option value="5">item 5</option>

请记住，您正在追加 HTML，而不仅仅是追加数据。

我会说放一个控制台.log并尝试调试从服务器接收的数据。

$('#btnListBlob').click(function () {
        $.ajax({
            type: "POST",
            url: 'http://localhost:50525/BlobService.svc/ListBlob',
            data: JSON.stringify(),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            processData: true,
            success: function (data) {

控制台.log（数据）

                $(data).appendTo('#blobList')
                alert('listed');
            },
            error: function (data) {
                alert('Some error Occurred!');
            }
        });
    });

以下是一些您可能会发现有用的建议： 

// only update the dom on click
// also use the new on() method
$('#btnListBlob').on("click", function () {
    $("#blobList").html(processData())
});
// separate the call and data processing
var serverData = {"fakeServerData":[
    {"data": "test data 1"},
    {"data": "test data 2"}
]};
function processData(){
    var options ="";
    for( var i = 0 ; i < serverData.fakeServerData.length ; i++){
        options += "<option>" + serverData.fakeServerData[i].data + "</option>";
    }
    return options;
}

希望对您有所帮助，祝您好运！

相关文章：