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更新元素。

Answer 2

您需要使用text()或html()进行撰写，因为val()用于表单输入

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

Answer 3

使用html方法更新标签文字。

   $('#lblVal1Total').html(row.val1Total);
   $('#lblVal2Total').html(row.val2Total);
   $('#lblVal3Total').html(row.val3Total);

按下按钮时写入Ajax返回数据

3 个答案: