javascript - 在 .net 中使用 ajax 切换不处理动态内容的数据

Question

我正在制作一个实时数据门户，我必须在其中使用 C# 在 asp.net 中使用 Ajax 显示实时数据。

我有一个表和一个包含数据但以不同方式/不同样式的 div。

每次我的页面在 4 秒后加载以显示更新的数据，即表和 div 都刷新以具有更新的数据。

最初当页面第一次加载时，我显示表格以显示数据并隐藏 div 形式的数据，如果我单击按钮(切换按钮)它将以 div 形式显示数据并隐藏表格数据。

现在的问题是，当我单击切换按钮时，它不会以 div 形式显示数据，但会重新加载整个 java 脚本 每次单击按钮时都会在表格中显示数据。 我想在表格和 div 之间切换。

下面是我到目前为止所做的代码。 请帮助我做错了什么。 谢谢。

注意数据来自 db，它是 SQL。

<form id="form1" runat="server">
    <div id="container">
            <table id="liveData">
            </table>
            <div id="div_f" style="display:none;">
                <%--<table id="liveData_div"></table>--%>
            </div>
    </div>
    <button>Toggle Data</button>
</form>
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/jquery-2.1.4.js"></script>
<script>
    (function worker() {
        $.ajax({

            type: "POST",
            url: "Default2.aspx/BindData",
            contentType: "application/json;charset=utf-8",
            data: {},
            dataType: "json",
            success: function (data) {
                //alert("Hello");
                $("#liveData").empty();
                if (data.d.length > 0) {
                    InDivs(data);
                    $("#liveData").append("<tr><th>Node Id</th><th>Parent</th><th>Voltage</th><th>Humid</th><th>HumTemp</th><th>PrTemp</th><th>Pressure</th><th>Light</th><th>Accel_X</th><th>Accel_Y</th><th>result_time</th></tr>");
                    for (var i = 0; i < data.d.length; i++) {
                        $("#liveData").append("<tr><td>" +
                        data.d[i].nodeID + "</td><td>" +
                        data.d[i].parent + "</td> <td>" +
                        data.d[i].voltage + "</td><td>" +
                        data.d[i].humid + "</td> <td>" +
                        data.d[i].humtemp + "</td><td>" +
                        data.d[i].prtemp + "</td> <td>" +
                        data.d[i].press + "</td><td>" +
                        data.d[i].light + "</td> <td>" +
                        data.d[i].accel_x + "</td><td>" +
                        data.d[i].accel_y + "</td><td>" +
                        data.d[i].result_time + "</td></tr>");
                    }


                }
                // Nontoggle();
            },

            error: function (result) {

                //Handling error
                alert("error");
            },
            complete: function () {
                // Schedule the next request when the current one's complete
                setTimeout(worker, 4000);
            }
        });
    })();

    function InDivs(data) {
        $("#div_f").empty();
        if (data.d.length > 0) {
            //$("#liveData").append("<tr><th>Node Id</th><th>Parent</th><th>Voltage</th><th>Humid</th><th>HumTemp</th><th>PrTemp</th><th>Pressure</th><th>Light</th><th>Accel_X</th><th>Accel_Y</th><th>result_time</th></tr>");
            for (var i = 0; i < data.d.length; i++) {
                $("#div_f").append(
                "<table class='LiveData_div'><tr>" +
                "<td>Node Id</td>" +
                "<td>" + data.d[i].nodeID + "</td>" +
                "<td>Parent Id</td>" +
                "<td>" + data.d[i].parent + "</td>" +
                "</tr>" +
                "<tr>" +
                "<td>Voltage</td>" +
                "<td>" + data.d[i].voltage + "</td>" +
                "<td>Humid</td>" +
                "<td>" + data.d[i].humid + "</td>" +
                "</tr>" +
                "<tr>" +
                "<td>Hum Temp</td>" +
                "<td>" + data.d[i].humtemp + "</td>" +
                "<td>Press</td>" +
                "<td>" + data.d[i].press + "</td>" +
                "</tr>" +
                "<tr>" +
                "<td>Press Temp</td>" +
                "<td>" + data.d[i].prtemp + "</td>" +
                "<td>Light</td>" +
                "<td>" + data.d[i].light + "</td>" +
                "</tr>" +
                "<tr>" +
                "<td>Accel_x</td>" +
                "<td>" + data.d[i].accel_x + "</td>" +
                "<td>Accel_y</td>" +
                "<td>" + data.d[i].accel_y + "</td>" +
                "</tr>" +
                "<tr>" +
                "<td>Time</td>" +
                "<td>" + data.d[i].result_time + "</td>" +
                "</tr></table>");
            }
        }
    }
    $(function () {
        $('button').live('click', function () {
            $('#div_f').toggle();
            $('#liveData').toggle();
        });
    });


</script>

Answer 1

问题

由于 button 标记默认具有 type='submit'，因此您的页面会重新加载，这将刷新页面。

解决方案

您应该将您的类型定义为 type='button' 以防止该行为，例如:

<button type='button'>Toggle Data</button>

希望这对您有所帮助。