javascript - 按下按钮时写入 Ajax 返回的数据

Question

我有一个摘要报告数据处理程序 (dhSummaryReport.ashx)，它返回 json 数据，如下所示:

{"iTotalRecords":1,"aaData":[{"val1Total":3,"val2Total":6,"val3Total":0}]}

我有一个网页，我想将上述结果显示到一系列输入标签(简化版本如下):

<div class="row">
    <input id="txtStartDate" type="text" class="form-control date-picker"/>
    <input id="txtEndDate" type="text" class="form-control date-picker"/>
    <input type="button" id="btnSearch" value="Search"/>
</div>
<div class="row">
    <div class="name">Monthly Totals</div>
    <div class="value"><label id="lblVal1Total">0</label></div>
    <div class="value"><label id="lblVal2Total">0</label></div>
    <div class="value"><label id="lblVal3Total">0</label></div>
</div>

我有以下 jQuery 代码，它运行对数据处理程序的 ajax 调用。值已成功返回(我可以在单步执行代码时看到它们)，但网页未使用新数字进行更新。

<script type="text/javascript">
    $(document).ready(function () {

        // Search Button Press
        $('#btnSearch').click(function () {

            // Collect Parameter Input Values
            var dStartDate = $('#txtStartDate').val();
            var dEndDate = $('#txtEndDate').val();

            // Run Data Handler Query
            $.ajax({
                url: "dhSummaryReport.ashx",
                contentType: "application/json; charset=utf-8",
                cache: false,
                dataType: "json",
                data: { 
                    startDate: dStartDate,
                    endDate: dEndDate
                },
                responseType: "json",
                success: OnViewComplete,
                error: OnViewFail
            });
            return false;

            function OnViewComplete(result) {

                //Cycle Through JSON Rows
                $.each(result.aaData, function (i, row) {
                    $('#lblVal1Total').val(row.val1Total);
                    $('#lblVal2Total').val(row.val2Total);
                    $('#lblVal3Total').val(row.val3Total);
                });

            }

            function OnViewFail(result) {
                alert('Request Failed');
            }

        });

    });
</script>

为什么网页不更新为新值？任何帮助将不胜感激。

Answer 1

<label>元素没有 value属性，因此您不能使用 .val 。使用.text更新元素。