使用Ajax调用填充html列表

Posted 2021-02-24

// Get the json from the controller
function GetListItems() {
    $.ajax({
        type: "POST",
        url: "/JsonService/GetItems",
        contentType: "application/json; charset=utf-8",
        data: "{}",
        dataType: "json",
        success: function (result) {
            DisplayListItems(result);
        },
        "error": function (result) {
            var response = result.responseText;
            alert('Error loading: ' + response);
        }
    });
}
 
// Create list items and append them inside <ul> element
function DisplayListItems(list) {
    $.each(list, function(index, element) {
        var itemhtml = ["<li>",
                                "<div>",
                                    "<div>",
                                        element.Title,
                                    "</div>",
                                    "<div>",
                                        element.Description,
                                    "</div>",                                    
                                "</div>",
                            "</li>"].join('
');
        $(".list > ul").append(itemHTML);
    }
}
 
// Controller method that serves json data
public JsonResult GetItems()
{
    IQueryable<Item> itemList = new DAO().GetList();
 
    return Json(from e in itemList
                select new
                {
                    Title = e.Title,
                    Description = e.Description
                });
}