使用ajax不刷新表答案

【问题标题】：Table not refreshing using ajax使用ajax不刷新表
【发布时间】：2014-05-28 14:38:11
【问题描述】：

我正在尝试使用 MVC。我有一个包含下拉列表和表格的视图。当我从下拉列表中选择一个选项时，我想从我的控制器中获取数据并更新视图：

查看：

    <div>
        <h2>Current Print Statistics</h2>
        @using (Html.BeginForm())
        {
            @Html.DropDownList("LogTypes", new SelectList(Model.LogTypes, "Value", "Text"), new
            {
                id = "logType",
                data_url = Url.Action("GetStatistics", "Home")
            })

            <table id="modelTable" class="table table-condensed">
                <tr>
                    <th>RequestedOn</th>
                    <th>PrintedOn</th>
                    <th>Message</th>
                    <th>Success</th>
                    <th>TemplateName</th>
                </tr>
                <tbody>
                    @foreach (var item in Model.PrintLogs)
                    {
                        string css = (item.Success) ? "success" : "danger";
                        string link = (item.Success) ? "www.google.com" : string.Empty;
                        <tr class="@css">
                            <td>@item.RequestedOn</td>
                            <td>@item.PrintedOn</td>
                            <td>@item.Message</td>
                            @if (item.Success)
                            {
                                <td>@item.Success</td>
                            }
                            else
                            {
                                <td>@Html.ActionLink("False", "Index", "LogView", new { id = item.LogID }, null)</td>
                            }
                            <td>@item.TemplateName</td>
                        </tr>
                    }
                </tbody>
            </table>
        }
    </div>
</div>

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
    $('#logType').change(function () {
        console.log($(this).data('url'));
        var selectedValue = $(this).val();
        var table = $('#modelTable');


        $.ajax({
            url: $(this).data('url'),
            type: 'GET',
            cache: false,
            context: table,
            data: { value: selectedValue },
            success: function (result) {
                $.each(result.PrintLogs,
                    function (index, log) {
                        $('<tr/>', {
                            html: $('<td/>', {
                                html: log.RequestedOn
                            }).after($('<td/>', {
                                html: log.PrintedOn
                            })).after($('<td/>', {
                                html: log.Success
                            })).after($('<td/>', {
                                html: log.Message
                            })).after($('<td/>', {
                                html: log.TemplateName
                            }))
                        }).appendTo(tableBody);
                    }
                );
            }
        });
    });
});

</script>

控制器：

[HttpGet]
public JsonResult GetStatistics(string value)
{          
        var request = LogTypeRequest.Last24H;
        if (value == "0") request = LogTypeRequest.Last24H;
        if (value == "1") request = LogTypeRequest.LastWeek;
        if (value == "2") request = LogTypeRequest.LastMonth;

        var model = new PrintServerModel
        {
            LogTypes = new List<ListItem>
                {
                    new ListItem() {Text = "Last 24 Hours", Value = "0"},
                    new ListItem() {Text = "Last Week", Value = "1"},
                    new ListItem() {Text = "Last Month", Value = "2"}
                },
            PrintLogs = PrintServerService.GetPrinterLog(request)
        };
        return Json(model, JsonRequestBehavior.AllowGet);
    }

现在，当我尝试在 chrome 中调试时，当到达 $.ajax({ 行时，它似乎跳到了末尾。

理想情况下，我想要的是在启动时显示数据，然后当用户从下拉列表中选择某些内容时，刷新数据。

非常感谢任何帮助！

【问题讨论】：

少代码多答案
appendTo("#modelTable tbody");

标签： c# javascript jquery ajax json

【解决方案1】：

很可能是 json 调用出现错误，您应该在其末尾添加 .done 或 error: 以便查看错误。

chrome 调试工具中还有一个用于查看网络调用的选项卡，您可以在其中看到调用的响应以及一些其他详细信息。

只是查看ajax调用，可能想改成有

data: JSON.stringify( { value: selectedValue }),

如果您获得更多信息，我会尽我所能来改进我的答案。

【讨论】：